page.js

page 檔案允許您定義路線**獨有**的使用者介面。您可以透過從檔案中預設匯出元件來建立頁面

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 檔案才能使路由段**公開訪問**。
頁面預設是伺服器元件，但可以設定為客戶端元件。

參考

屬性

`params` (可選)

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

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

路由示例	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 屬性是一個 Promise，您必須使用 async/await 或 React 的 use 函式來訪問這些值。
- 在 14 版及更早版本中，params 是一個同步屬性。為了幫助實現向後相容性，您仍然可以在 Next.js 15 中同步訪問它，但此行為將來會被棄用。

`searchParams` (可選)

一個解析為包含當前 URL 搜尋引數的物件的 Promise。例如：

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

客戶端元件**頁面**也可以使用 React 的 use 鉤子來訪問 searchParams。

'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=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 例項。

頁面屬性助手

您可以使用 PageProps 對頁面進行型別化，以從路由字面量中獲取強型別的 params 和 searchParams。PageProps 是一個全域性可用的助手。

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 屬性為頁面顯示或獲取特定內容。

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  return <h1>Blog Post: {slug}</h1>
}

使用 `searchParams` 處理過濾

您可以使用 searchParams 屬性根據 URL 的查詢字串處理過濾、分頁或排序。

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

在客戶端元件中讀取 `searchParams` 和 `params`

要在客戶端元件（不能是 async）中使用 searchParams 和 params，您可以使用 React 的 use 函式來讀取 Promise

'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`。