page.js

page ファイルは、ルートに固有の UI を定義できます。ファイルからコンポーネントをデフォルトエクスポートすることでページを作成できます。

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

Good to know

page には、.js、.jsx、または .tsx のファイル拡張子を使用できます。
page は常にルートツリーのリーフになります。
ルートセグメントを一般公開するには、page ファイルが必要です。
ページはデフォルトでサーバーコンポーネントですが、クライアントコンポーネントに設定することもできます。

リファレンス

Props

`params` (オプション)

ルートセグメントからそのページまでの動的ルートパラメータを含むオブジェクトに解決される Promise。

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
}

例：ルート	URL	`params`
`app/shop/[slug]/page.js`	`/shop/1`	`Promise<{ slug: '1' }>`
`app/shop/[category]/[item]/page.js`	`/shop/1/2`	`Promise<{ category: '1', item: '2' }>`
`app/shop/[...slug]/page.js`	`/shop/1/2`	`Promise<{ slug: ['1', '2'] }>`

params プロップは Promise であるため、値にアクセスするには async/await または React の use 関数を使用する必要があります。
- バージョン 14 以前では、params は同期プロップでした。下位互換性を支援するために、Next.js 15 でも同期的にアクセスできますが、この動作は将来的に非推奨になります。

`searchParams` (オプション)

現在の URL の検索パラメータを含むオブジェクトに解決される Promise。例:

export default async function Page({
  searchParams,
}: {
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
  const filters = (await searchParams).filters
}

クライアントコンポーネントのページも、React の use フックを使用して searchParams にアクセスできます。

'use client'
import { use } from 'react'
 
export default function Page({
  searchParams,
}: {
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
  const filters = use(searchParams).filters
}

URL例	`searchParams`
`/shop?a=1`	`Promise<{ a: '1' }>`
`/shop?a=1&b=2`	`Promise<{ a: '1', b: '2' }>`
`/shop?a=1&a=2`	`Promise<{ a: ['1', '2'] }>`

searchParams プロップは Promise であるため。値にアクセスするには async/await または React の use 関数を使用する必要があります。
- バージョン 14 以前では、searchParams は同期プロップでした。後方互換性のために、Next.js 15 では引き続き同期的にアクセスできますが、この動作は将来非推奨になる予定です。
searchParams は、事前に知ることができない動的 APIです。これを使用すると、ページはリクエスト時に動的レンダリングにオプトインされます。
searchParams は、URLSearchParams インスタンスではなく、プレーンな JavaScript オブジェクトです。

ページプロップヘルパー

PageProps でページを型付けすることで、ルートリテラルから強力に型付けされた params と searchParams を取得できます。PageProps はグローバルに利用可能なヘルパーです。

export default async function Page(props: PageProps<'/blog/[slug]'>) {
  const { slug } = await props.params
  const query = await props.searchParams
  return <h1>Blog Post: {slug}</h1>
}

知っておくと良いこと

リテラルルート (例: '/blog/[slug]') を使用すると、params のオートコンプリートと厳密なキーが有効になります。

静的ルートは params を {} に解決します。

型は next dev、next build、または next typegen の実行中に生成されます。

型生成後、PageProps ヘルパーはグローバルで利用可能になります。インポートする必要はありません。

例

`params` に基づくコンテンツの表示

動的ルートセグメントを使用すると、params プロップに基づいて、ページ固有のコンテンツを表示または取得できます。

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  return <h1>Blog Post: {slug}</h1>
}

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

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

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>
  )
}

クライアントコンポーネントでの `searchParams` と `params` の読み取り

クライアントコンポーネント (async にできない) で searchParams と params を使用するには、Promise を読み取るために React の use 関数を使用できます。

'use client'
 
import { use } from 'react'
 
export default 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-RC`	`params` と `searchParams` は Promise になりました。 codemod が利用可能です。
`v13.0.0`	`page` が導入されました。