page.js

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

app/blog/[slug]/page.tsx

TypeScript

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

リファレンス

プロパティ

`params`（オプション）

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

app/shop/[slug]/page.tsx

TypeScript

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

対象ルート	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。例：

app/shop/page.tsx

TypeScript

export default async function Page({
  searchParams,
}: {
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
  const filters = (await 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は通常のJavaScriptオブジェクトであり、URLSearchParamsのインスタンスではありません。

例

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

動的ルートセグメントを使用して、paramsプロパティに基づいてページの特定のコンテンツを表示またはフェッチできます。

app/blog/[slug]/page.tsx

TypeScript

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  return <h1>ブログ投稿: {slug}</h1>
}

`searchParams`でのフィルタリング処理

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

app/shop/page.tsx

TypeScript

export default async function Page({
  searchParams,
}: {
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
  const { page = '1', sort = 'asc', query = '' } = await searchParams
 
  return (
    <div>
      <h1>商品一覧</h1>
      <p>検索クエリ: {query}</p>
      <p>現在のページ: {page}</p>
      <p>ソート順: {sort}</p>
    </div>
  )
}

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

asyncにできないクライアントコンポーネントでsearchParamsとparamsを使用するには、Reactのuse関数を使用してPromiseを読み取ることができます：

app/page.tsx

TypeScript

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

app/page.js

'use client'
 
import { use } from 'react'
 
export function Page({ params, searchParams }) {
  const { slug } = use(params)
  const { query } = use(searchParams)
}

バージョン履歴

バージョン	変更点
`v15.0.0-RC`	`params`と`searchParams`が現在Promiseになっています。コードモッドが利用可能です。
`v13.0.0`	`page`が導入されました。