Next.js 13 で URL の情報を取得する方法を整理する 【useRouter・useSearchParams・usePathname・useParams】(next/navigation)

概要

• next.js 12 から next.js 13 へのバージョンアップの大きな変更点の1つとして，ルーティングの方法が変更された点が挙げられます。next.js 12 では，"next/router" の useRouter を使用していましたが，next.js 13 では，"next/navigation" の useRouter を使用する必要があります。

• この記事では，"next/navigation" を使用して表示しているURLの情報を取得する方法について解説します。

URL の情報を取得する

• URL の情報を取得する関数として，以下の3つがあります。

1. useSearchParams
2. usePathname
3. useParams

• Next.js の公式の Pages ディレクトリから App ディレクトリへの移行に関する説明 では，以下のような記述があります。

• 新しい useRouter は，pathname の文字列が返しません。pathname が必要なら，usePathname hook を使用してください。
• 新しい useRouter は，query オブジェクトを返しません。query オブジェクトが必要なら，useSearchParams hook を使用してください。
• usePathname と useSearchParams は一緒に使用できます。
• usePathname と useSearchParams は，Client Componentでのみ使用できます。

• また，Next.js 13.3 から，useParams hook が導入されました。この hook は，表示中のページの dynamic params を取得するために使用します。この hook は Pages ディレクトリで使用すると null を返します。

動かしてみた

前提(共通)

• 動作環境は，next.js 13.3 です。
• それぞれのサンプルコードを表示するページに追加します。
• ページへのパスは，"/demo/[id]" とします。[id]は dynamic params です。
• ページへのアクセスのときは，"/demo/hoge?params1=fuga" をブラウザに入力します。

useSearchParams

import { useSearchParams } from 'next/navigation';

// 省略

  const searchParams = useSearchParams()
  console.log(searchParams)
  
// 省略

まずは，useSearchParams の結果です。ページにアクセスするときに付与したクエリパラメータが取得できることがわかります。

実行結果

# /demo/hoge?params1=fuga にアクセスした結果

params1=fuga

useSearchParams で取得したパラメータは，以下のように取得できます。

const searchParams = useSearchParams()
const params1 = searchParams.get('params1')

usePathname

import { usePathname } from 'next/navigation';

// 省略

  const pathname = usePathname()
  console.log(pathname)
  
// 省略

次に，usePathname の結果です。アクセスしたときのパスが取得できることがわかります。このパスは，dynamic params を含みます。

実行結果

# /demo/hoge?params1=fuga にアクセスした結果

/demo/hoge

useParams

import { useParams } from 'next/navigation';

// 省略

  // useParams の戻り値はオブジェクト
  const params = useParams()
  console.log("result of useParams: %o", params)
  
// 省略

最後に，useParams の実行結果です。dynamic params である [id] が取得できていることが確認できました。

実行結果

# /demo/hoge?params1=fuga にアクセスした結果

{id: 'hoge'}

取得したパラメータへのアクセスは，以下のようにできます。

const params = useParams()
const id = params.id

まとめ

URL の情報を取得する "next/navigation" の3つの hook を整理しました。

1. usePathname: dynamic params を含むパスを取得
2. useSearchParams: クエリパラメータを取得
3. useParam: dynamic params を取得

誰かの参考になれば幸いです。