page.js

page 檔案用於在 Next.js 應用程式中定義頁面。

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

參考

屬性 (Props)

`params` (選用)

一個 Promise，解析為一個物件，包含從根區段到該頁面的動態路由參數。

app/shop/[slug]/page.tsx

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const slug = (await params).slug
}

路由範例	網址	`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`	`/shop/1/2`

由於 params 屬性是一個 Promise，您必須使用 async/await 或 React 的 use 函式來存取值。
- 在版本 14 以及更早的版本中，params 是一個同步屬性。為了向後相容，您仍然可以在 Next.js 15 中同步存取它，但此行為將在未來棄用。

`searchParams` (選用)

一個 Promise，解析為一個物件，包含目前網址的搜尋參數。例如：

app/shop/page.tsx

export default async function Page({
  searchParams,
}: {
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
  const filters = (await searchParams).filters
}

網址範例	`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 屬性是一個 Promise，您必須使用 async/await 或 React 的 use 函式來存取值。
- 在版本 14 以及更早的版本中，searchParams 是一個同步屬性。為了向後相容，您仍然可以在 Next.js 15 中同步存取它，但此行為將在未來棄用。
searchParams 是一個動態 API，其值無法事先得知。使用它會讓頁面在請求時選擇動態渲染。
searchParams 是一個普通的 JavaScript 物件，而不是 URLSearchParams 的實例。

## 範例

根據 `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 根據網址的查詢字串來處理篩選、分頁或排序。

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 函式來讀取 promise

app/page.tsx

'use client'
 
import { use } from 'react'
 
export 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`。