メインコンテンツまでスキップ

page.js

page ファイルは、Next.js アプリケーション内のページを定義するために使用されます。

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

リファレンス

Props

params (任意)

root セグメントからそのページまでの動的ルートパラメータを含むオブジェクトに解決するプロミス。

app/shop/[slug]/page.tsx
export default async function Page({
params,
}: {
params: Promise<{ slug: string }>
}) {
const slug = (await params).slug
}
ルート例URLparams
app/shop/[slug]/page.js/shop/1Promise<{ slug: '1' }>
app/shop/[category]/[item]/page.js/shop/1/2Promise<{ category: '1', item: '2' }>
app/shop/[...slug]/page.js/shop/1/2Promise<{ slug: ['1', '2'] }>
  • params prop はプロミスであるため、値にアクセスするためには async/await または React の use 関数を使用する必要があります。
    • バージョン 14 以前では、params は同期的なプロップでした。後方互換性を保つために、Next.js 15 でも同期的にアクセスできますが、この動作は将来的には廃止されます。

searchParams (任意)

現在の URL の検索パラメータを含むオブジェクトに解決するプロミス。例えば:

app/shop/page.tsx
export default async function Page({
searchParams,
}: {
searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
const filters = (await searchParams).filters
}
URL 例searchParams
/shop?a=1Promise<{ a: '1' }>
/shop?a=1&b=2Promise<{ a: '1', b: '2' }>
/shop?a=1&a=2Promise<{ a: ['1', '2'] }>
  • searchParams prop はプロミスであるため、値にアクセスするためには async/await または React の use 関数を使用する必要があります。
    • バージョン 14 以前では、searchParams は同期的なプロップでした。後方互換性を保つために、Next.js 15 でも同期的にアクセスできますが、この動作は将来的には廃止されます。
  • searchParams は将来的に値がわからない**動的 APIです。これを使用すると、リクエスト時にページが動的レンダリング**にオプトインすることになります。
  • searchParamsURLSearchParams インスタンスではなく、単純な JavaScript オブジェクトです。

paramsに基づいたコンテンツの表示

動的ルートセグメントを使用して、params prop に基づいて、ページの特定のコンテンツを表示または取得することができます。

app/blog/[slug]/page.tsx
export default async function Page({
params,
}: {
params: Promise<{ slug: string }>
}) {
const { slug } = await params
return <h1>Blog Post: {slug}</h1>
}

searchParamsを使用したフィルタリングの処理

searchParams prop を使用して、URL のクエリ文字列に基づいたフィルタリング、ページネーション、またはソートを処理できます。

app/shop/page.tsx
export default async function Page({
searchParams,
}: {
searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
const { page = '1', sort = 'asc', query = '' } = await searchParams

return (
<div>
<h1>Product Listing</h1>
<p>Search query: {query}</p>
<p>Current page: {page}</p>
<p>Sort order: {sort}</p>
</div>
)
}

Client ComponentsでのsearchParamsparamsの読み取り

Client Component(async にできない)で searchParamsparams を使用するには、React の use 関数を使ってプロミスを読み取ります:

app/page.tsx
'use client'

import { use } from 'react'

export function Page({
params,
searchParams,
}: {
params: Promise<{ slug: string }>
searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
const { slug } = use(params)
const { query } = use(searchParams)
}

バージョン履歴

バージョン変更点
v15.0.0-RCparamssearchParams がプロミスになりました。 codemod が利用可能です。
v13.0.0page が導入されました。