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

page.js

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

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

Good to know​

  • page には .js、.jsx、または .tsx のファイル拡張子を使用できます
  • page は常にルートsubtreeのleafです
  • ルートセグメントを公開可能にするためには、page ファイルが必要です
  • ページはデフォルトでServer Componentsですが、Client Componentに設定することもできます

Reference​

Props​

params (オプション)​

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

app/shop/[slug]/page.tsx
export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
}
ルートの例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 は同期的なpropでした。後方互換性を考慮して、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 は同期的なpropでした。後方互換性を考慮して、Next.js 15では同期的にアクセスすることも可能ですが、この動作は将来的に廃止される予定です
  • searchParams は、事前に値を知ることができない**Dynamic APIです。これを使用すると、リクエスト時にページが動的レンダリング**されるようになります
  • searchParams は URLSearchParams インスタンスではなく、単なるJavaScriptオブジェクトです

Examples​

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でのsearchParamsとparamsの読み取り​

Client Component（asyncにできない）で searchParams と params を使用するには、Reactのuse関数を使用してプロミスを読み取ります：

app/page.tsx
'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-RCparams と searchParams がプロミスになりました。codemodが利用可能です。
v13.0.0page が導入されました。