page.js

page 文件允许你定义独有于某个路由的 UI。你可以通过从文件中默认导出一个组件来创建一个页面。

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

须知

page 可以使用 .js、.jsx 或 .tsx 文件扩展名。
page 始终是路由子树的叶节点。
需要 page 文件才能使路由段公开访问。
页面默认是服务器组件，但可以设置为客户端组件。

参考

Props

`params` (可选)

一个 Promise，它解析为一个对象，其中包含从根段到该页面的动态路由参数。

app/shop/[slug]/page.tsx

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 prop 是一个 promise。你必须使用 async/await 或 React 的 use 函数来访问这些值。
- 在版本 14 及更早版本中，params 是一个同步 prop。为了帮助向后兼容，你仍然可以在 Next.js 15 中同步访问它，但此行为将在未来被弃用。

`searchParams` (可选)

一个 Promise，它解析为一个对象，其中包含当前 URL 的查询参数。例如

app/shop/page.tsx

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 中同步访问它，但此行为将在未来被弃用。
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 来处理基于 URL 查询字符串的筛选、分页或排序。

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

在客户端组件中读取 `searchParams` 和 `params`

要在客户端组件（不能是 async）中使用 searchParams 和 params，你可以使用 React 的 use 函数来读取 promise

app/page.tsx

'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` 现在是 promises。提供了一个 codemod。
`v13.0.0`	引入了 `page`。