Easy way to get path in app router server component

[lorensr]

Goals

Ability to render something in layout.ts differently based on which path it's on

Non-Goals

No response

Background

Similar discussion: #50189

Current semi-alternative:

middleware:

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

export function middleware(request: NextRequest) {
  const url = request.nextUrl
  const pathname = url.pathname

  const response = NextResponse.next()
  response.headers.set('x-pathname', pathname)

  return response
}

export const config = {
  matcher: '/:path*', // Apply middleware to all routes
}

in component:

  const headersList = headers()
  const currentPath = headersList.get('x-pathname')

The issue with this is that the component doesn't get rerendered on route change, so currentPath isn't updated.

Proposal

Perhaps pathname(), similar to headers()?

[lorensr]

The answer is that you can't get server components to rerender on route change because they aren't rehydrated / don't have JS! 😆 Whatever part of the layout you need to change has to be a client component, where you can use import { usePathname } from 'next/navigation';

[icyJoseph]

Hi,

Getting the pathname requires a bit of setup from your side, but not middleware at all.

Here's a long winded explanation: #63298 (comment)

A demo: https://stackblitz.com/edit/nextjs-q3dnp8?file=app%2Fpage.tsx,app%2FLocaleSwitch.tsx,app%2F[locale]%2Fpage.tsx,app%2Fserver-context.ts

Since, often you don't want the pathname, or other, necessarily, but some data derived from it, you can use that trick to make it available.

Just remember, that layouts are a bit quirky, and render after a page, but are cached on the client. So the same reasons to not do authentication in layouts, apply to not relying too much in context.