🦦

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

2023/09/03に公開

Next.js

React

tech

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が取れるという解決策が提案されているがこれは注意が必要

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

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

安全な方法

middlewareを使いましょう。
実装方法についてはこちらで説明されているように、middlewareで任意のheaderにrequest.urlを設定して、page.tsxやlayout.tsxからheadersにアクセスするという方法。

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

Client Componentだと

x-invoke-path

安全な方法

Discussion

`x-invoke-path`