Access Request object in Nextjs App router

layout.tsx

import { headers } from 'next/headers'


export default async function Layout({ children }: { children: React.ReactNode }) {
  // access searchParams
  const sp = headers().get('searchParams') || ''

...
}

// docs https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes
export const runtime = 'edge';

// star the gist and couple of my pinned repo if it is useful for you. :)

middleware.ts

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  // .search and .searchParams are incorrect
  const url = request.url?.includes('_next') ? null : request.url
  const sp = url?.split?.('?')?.[1] || ''

  const response = NextResponse.next()

  if (url !== null) {
    response.headers.set('searchParams', sp)
  }

  return response
}