Menu

page.js

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

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>My Page</h1>
}

補足

  • pageに対して.js、.jsx、.tsxファイル拡張子を使用できます。
  • pageは常にルート部分木のリーフです。
  • ページファイルはルートセグメントを公開アクセス可能にするために必須です。
  • ページはデフォルトではServer Componentsですが、Client Componentに設定することもできます。

リファレンス

Props

params（オプション）

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

app/shop/[slug]/page.tsx
TypeScript
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プロップは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
}

Client ComponentページはReactのuseフックを使用してsearchParamsにアクセスすることもできます：

app/shop/page.tsx
TypeScript
'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=1Promise<{ a: '1' }>
/shop?a=1&b=2Promise<{ a: '1', b: '2' }>
/shop?a=1&a=2Promise<{ a: ['1', '2'] }>
  • searchParamsプロップはPromiseです。値にアクセスするにはasync/awaitまたはReactのuse関数を使用する必要があります。
    • バージョン14以前では、searchParamsは同期的なプロップでした。後方互換性を支援するため、Next.js 15でも同期的にアクセスできますが、この動作は今後廃止される予定です。
  • searchParamsは**Dynamic APIであり、その値を事前に知ることはできません。これを使用すると、ページがリクエスト時に動的レンダリング**にオプトインされます。
  • searchParamsはURLSearchParamsインスタンスではなく、プレーンなJavaScriptオブジェクトです。

ページプロップヘルパー

PagePropsでページをタイプ設定して、ルートリテラルから厳密にタイプされたparamsとsearchParamsを取得できます。PagePropsはグローバルに利用可能なヘルパーです。

app/blog/[slug]/page.tsx
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プロップに基づいてページの特定のコンテンツを表示またはフェッチできます。

app/blog/[slug]/page.tsx
TypeScript
export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  return <h1>Blog Post: {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>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関数を使用してPromiseを読み込むことができます：

app/page.tsx
TypeScript
'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がPromiseになりました。codemodが利用可能です。
v13.0.0導入時期：page