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でいい方法が見つからなかったのですが、正しい方法を知りたい、、