NextJS 14.0.0 버전 기준으로 작성된 글입니다.

1. usePathname

클라이언트 컴포넌트에서는 usePathname 으로 pathname에 간편히 접근가능하지만
usePathname 은 클라이언트 컴포넌트에서만 사용이 가능합니다.

2. middleware

서버컴포넌트에서 pathname에 접근하기 위해서 middleware 에서 추가적인 작업이 필요했습니다.

Nextjs middleware 공식문서 - https://nextjs.org/docs/app/building-your-application/routing/middleware

app 폴더와 같은 계층에 middleware.ts 파일을 생성하고 아래와 같이 작성하고

// middleware.ts
import { NextRequest, NextResponse } from 'next/server'

export function middleware(request: NextRequest) {
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('x-pathname', request.nextUrl.pathname);

  return NextResponse.next({
    request: {
      headers: requestHeaders,
    }
  });
}

사용하고자 하는 서버 컴포넌트에서 아래와같이 x-pathname을 get해서 사용하면 된다

// /app/layout.tsx
import { headers } from 'next/headers';

export default function RootLayout() {
  const headersList = headers();
  const headerPathname = headersList.get('x-pathname') || "";
}

만약 pathname 이 아닌 url에 접근하고 싶으면 request.url을 requestHeaders에 set 해주면 된다

참고

https://github.com/vercel/next.js/issues/43704