Get the current URL server side

It caught me completely off guard! One would think the server should easily know what’s the current URL it’s serving, right? So you could do some stuff based on it.

Next doesn’t agree. Most of the system does not know about the request context at all.

The solution? Bring up the heavy tools - intercept and add custom header!

// middleware.ts
export function middleware(request: NextRequest) {
  return NextResponse.next({
     request: {
        // New request headers
        'x-pathname': request.nextUrl.pathname,
     },
  });
}

// app/some/where/page.tsx
import { headers } from 'next/headers';
export default async function Page() {
  const pathname = headers.get('x-pathname');
}

Unfortunately this comes at a huge price - every time you use headers, it breaks caching, because it’s a dynamic function! As of now, I haven’t seen an easy way around it.

Honestly, this one made me a bit sad. It’s okay for my use case, but it’s just awful…