kaitokkaitok
2023-09-03

Next.js Server ComponentでCurrent URLを取得したい

Server Componentで現在のURLを取りたい時がある。
そもそもpage.tsxなど自身のディレクトリがpathNameになるので動的に扱う必要があるのかという疑問もあるが自身のpathNameを知りたい時もある。

Client Componentだと

Client ComponentならusePathnameが使えるがServer Componentでは利用不可

import { usePathname } from 'next/navigation'
export default function ExampleClientComponent() {
  const pathname = usePathname()
  return <p>Current pathname: {pathname}</p>
}

x-invoke-path

Next.jsのIssueではx-invoke-pathというリクエストヘッダーの値からCurrent URLが取れるという解決策が提案されているがこれは注意が必要
https://github.com/vercel/next.js/issues/43704#issuecomment-1639648456

headers().get('x-invoke-path')

この方法はローカル開発などでは動作するがデプロイ先の環境によっては値が設定されないことがある。(Amplifyでは取得できなかった)

安全な方法

middlewareを使いましょう。
実装方法についてはこちらで説明されているように、middlewareで任意のheaderにrequest.urlを設定して、page.tsxやlayout.tsxからheadersにアクセスするという方法。
https://github.com/vercel/next.js/issues/43704#issuecomment-1411186664

Documentでいい方法が見つからなかったのですが、正しい方法を知りたい、、