Next.jsでURLの情報を取得する方法を整理する（usePathname/useSearchParams/useParams）

URL の情報を取得する方法

URLの情報を取得する "next/navigation" でのhookは下記３つ

• usePathname: dynamic params を含むパスを取得
• useSearchParams: クエリパラメータを取得
• useParams: dynamic params を取得

※ たまにuseRouterでqueryを取得しているものがあるが、Next.js12以前("next/router")での方法。
Next.js13以降( "next/navigation")では上記の3つなので混同しないように注意（useParams はNext.js 13.3から追加）

サンプルコード

useSearchParams

クエリパラメータの取得

import { useSearchParams } from 'next/navigation';

// 省略

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

// 省略

usePathname

アクセスした時のパスが取得できる（dynamic params を含む）

import { usePathname } from 'next/navigation';

// 省略

  const pathname = usePathname()

// 省略

useParams

dynamic params である [id] を取得

import { useParams } from 'next/navigation';

// 省略

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

// 省略