app/shop/[category]/[item]/page.js
page.js
/shop/1/2
Promise<{ category: '1', item: '2' }>
export default function Page({
params,
searchParams,
}: {
params: Promise<{ slug: string }>
searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
return <h1>My Page</h1>
}
Promise<{ slug: ['1', '2'] }>
params
プロパティはプロミスであるため、値にアクセスするには `async/await` または React の `use` 関数を使用する必要があります。- バージョン14以前では、`params` は同期的なプロパティでした。後方互換性のために、Next.js 15でも同期的にアクセスできますが、この挙動は将来的に非推奨になります。
searchParams
(オプション)- 現在のURLの検索パラメータを含むオブジェクトに解決されるプロミス。例:
app/shop/page.tsx
URLの例
searchParams
/shop?a=1
Promise<{ a: '1' }>
export default async function Page({
params,
}: {
params: Promise<{ slug: string }>
}) {
const { slug } = await params
}
/shop?a=1&b=2 | Promise<{ a: '1', b: '2' }> | /shop?a=1&a=2 |
---|---|---|
Promise<{ a: ['1', '2'] }> |
| バージョン14以前では、`searchParams` は同期的なプロパティでした。後方互換性のために、Next.js 15でも同期的にアクセスできますが、この挙動は将来的に非推奨になります。 |
|
| 例 |
|
| 動的ルートセグメントを使用すると、`params` プロパティに基づいて特定のコンテンツをページに表示したり、フェッチしたりできます。 |
searchParams
でフィルタリングを処理するsearchParams
プロパティを使用して、URLのクエリ文字列に基づいてフィルタリング、ページネーション、またはソートを処理できます。
クライアントコンポーネントで `searchParams` と `params` を読み取る
クライアントコンポーネント(`async` にはできません)で `searchParams` と `params` を使用するには、React の `use` 関数を使用してプロミスを読み取ることができます。
app/page.tsx
export default async function Page({
searchParams,
}: {
searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
const filters = (await searchParams).filters
}
バージョン履歴 | バージョン |
---|---|
変更点 | v15.0.0-RC |
| v13.0.0 |
| 前へ |
- not-found.js
- 次へ
- route.js
- この情報は役に立ちましたか?
サポートされています。
送信
リソース
Promise<{ category: '1', item: '2' }>
export default async function Page({
params,
}: {
params: Promise<{ slug: string }>
}) {
const { slug } = await params
return <h1>Blog Post: {slug}</h1>
}
ドキュメントサポートポリシー学習ショーケースブログチーム
Next.js Conf
app/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>
)
}
プレビュー
その他
Next.js Commerce
'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)
}
営業へのお問い合わせ
購読