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
は常にルートサブツリーのリーフ(末端)です。- ルートセグメントを公開アクセス可能にするには、
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).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
propはPromiseであるため、値にアクセスするにはasync/await
またはReactのuse
関数を使用する必要があります。- バージョン14以前では、
params
は同期的なpropでした。後方互換性を確保するため、Next.js 15でも同期的にアクセスできますが、この動作は将来的に非推奨となります。
- バージョン14以前では、
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
propはPromiseであるため、値にアクセスするにはasync/await
またはReactのuse
関数を使用する必要があります。- バージョン14以前では、
searchParams
は同期的なpropでした。後方互換性を確保するため、Next.js 15でも同期的にアクセスできますが、この動作は将来的に非推奨となります。
- バージョン14以前では、
searchParams
は、事前に値を知ることができない**Dynamic APIです。これを使用すると、リクエスト時に動的レンダリング**が有効になります。searchParams
はURLSearchParams
インスタンスではなく、通常のJavaScriptオブジェクトです。
例
params
に基づいてコンテンツを表示する
動的ルートセグメントを使用して、params
propに基づいて特定のコンテンツをページに表示またはフェッチできます。
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
propを使用して、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-RC | params とsearchParams がPromiseになりました。コードモッドが利用可能です。 |
v13.0.0 | 導入時期:page |