コンテンツへスキップ
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=2Promise<{ a: '1', b: '2' }>/shop?a=1&a=2
Promise<{ a: ['1', '2'] }>searchParams プロパティはプロミスであるため、値にアクセスするには `async/await` または React の `use` 関数を使用する必要があります。バージョン14以前では、`searchParams` は同期的なプロパティでした。後方互換性のために、Next.js 15でも同期的にアクセスできますが、この挙動は将来的に非推奨になります。
searchParams は、事前に値を知ることができない**動的API**です。これを使用すると、リクエスト時にページが**動的レンダリング**にオプトインされます。searchParams は、`URLSearchParams` インスタンスではなく、プレーンなJavaScriptオブジェクトです。
params に基づいてコンテンツを表示する searchParams は、`URLSearchParams` インスタンスではなく、プレーンなJavaScriptオブジェクトです。動的ルートセグメントを使用すると、`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
paramssearchParams はプロミスになりました。コードモッドが利用可能です。v13.0.0
page が導入されました。前へ
  • 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)
}

営業へのお問い合わせ

コミュニティGitHubリリーステレメトリーガバナンスVercelについて
Next.js + Vercelオープンソースソフトウェア
GitHubBlueskyX法務