useParams

useParams は、現在の URL によって埋め込まれたルートの動的パラメータを読み取るためのClient Componentフックです。

TypeScript

app/example-client-component.tsx

'use client'

import { useParams } from 'next/navigation'

export default function ExampleClientComponent() {
  const params = useParams<{ tag: string; item: string }>()

  // ルート -> /shop/[tag]/[item]
  // URL -> /shop/shoes/nike-air-max-97
  // `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
  console.log(params)

  return '...'
}

JavaScript

app/example-client-component.js

'use client'

import { useParams } from 'next/navigation'

export default function ExampleClientComponent() {
  const params = useParams()

  // ルート -> /shop/[tag]/[item]
  // URL -> /shop/shoes/nike-air-max-97
  // `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
  console.log(params)

  return '...'
}

パラメータ

const params = useParams()

useParams は、何もパラメータを受け取りません。

戻り値

useParams は、現在のルートの埋め込まれた動的パラメータを含むオブジェクトを返します。

• オブジェクト内の各プロパティは、アクティブな動的セグメントです
• プロパティの名前はセグメントの名前であり、プロパティの値はセグメントに埋め込まれるものです
• プロパティの値は、動的セグメントの種類に応じて string または string の配列のいずれかになります
• ルートに動的パラメータが含まれていない場合、useParams は空のオブジェクトを返します
• Pages Router で使用される場合、useParams は初期レンダリング時には null を返し、router の準備が整うと上記のルールに従ったプロパティで更新されます

例えば：

ルート	URL	useParams()
app/shop/page.js	/shop	{}
app/shop/[slug]/page.js	/shop/1	{ slug: '1' }
app/shop/[tag]/[item]/page.js	/shop/1/2	{ tag: '1', item: '2' }
app/shop/[...slug]/page.js	/shop/1/2	{ slug: ['1', '2'] }

バージョン履歴

バージョン	変更点
v13.3.0	useParams が導入されました。