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
 
// 省略