page.js

pageはルートに対して一意な UI です。

app/blog/[slug]/page.tsx

export default function Page({
  params,
  searchParams,
}: {
  params: { slug: string }
  searchParams: { [key: string]: string | string[] | undefined }
}) {
  return <h1>My Page</h1>
}

Props

params（任意）

ルート Segment からそのページまでの動的なルートパラメータを含むオブジェクト。例えば：

例	URL	params
app/shop/[slug]/page.js	/shop/1	{ slug: '1' }
app/shop/[category]/[item]/page.js	/shop/1/2	{ category: '1', item: '2' }
app/shop/[...slug]/page.js	/shop/1/2	{ slug: ['1', '2'] }

searchParams（任意）

現在の URL の検索パラメータを含むオブジェクト。例えば：

URL	searchParams
/shop?a=1	{ a: '1' }
/shop?a=1&b=2	{ a: '1', b: '2' }
/shop?a=1&a=2	{ a: ['1', '2'] }

Good to know:

• searchParamsは、事前に値を知ることができない動的 APIです。これを使用すると、リクエスト時にページが動的レンダリングに移行します
• searchParamsは、URLSearchParamsインスタンスではなく、プレーンな JavaScript オブジェクトを返します

Version 履歴

Version	Changes
v13.0.0	page 導入