Next.jsでURLの情報を取得する方法を整理する（usePathname/useSearchParams/useParams）
Next.js
読み込み中です
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から追加）
クエリパラメータの取得
import { useSearchParams } from 'next/navigation';
// 省略
const searchParams = useSearchParams()
const params1 = searchParams.get('params1')
// 省略アクセスした時のパスが取得できる（dynamic params を含む）
import { usePathname } from 'next/navigation';
// 省略
const pathname = usePathname()
// 省略dynamic params である [id] を取得
import { useParams } from 'next/navigation';
// 省略
const params = useParams()
const id = params.id
// 省略