page 文件允许您定义特定于某个路由的 唯一 UI。您可以通过从文件中默认导出组件来创建一个页面：
export default function Page({
params,
searchParams,
}: {
params: Promise<{ slug: string }>
searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
return <h1>My Page</h1>
}export default function Page({ params, searchParams }) {
return <h1>My Page</h1>
}.js、.jsx 或 .tsx 文件扩展名可用于 page 文件。page 文件始终是路由子树的 叶子 节点。page 文件是使路由段 公开可访问 所必需的。params（可选）一个 Promise，它解析为一个对象，其中包含从根路由段到当前页面的 动态路由参数。
export default async function Page({
params,
}: {
params: Promise<{ slug: string }>
}) {
const { slug } = await params
}export default async function Page({ params }) {
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 函数 来访问其值。
params 是一个同步属性。为了帮助实现向后兼容，您仍然可以在 Next.js 15 中同步访问它，但此行为将在未来版本中弃用。searchParams（可选）一个 Promise，它解析为一个对象，其中包含当前 URL 的 搜索参数。例如：
export default async function Page({
searchParams,
}: {
searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
const filters = (await searchParams).filters
}export default async function Page({ searchParams }) {
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
}'use client'
import { use } from 'react'
export default function Page({ searchParams }) {
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 函数 来访问其值。
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>
}export default async function Page({ params }) {
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>
)
}export default async function Page({ searchParams }) {
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)
}'use client'
import { use } from 'react'
export default function Page({ params, searchParams }) {
const { slug } = use(params)
const { query } = use(searchParams)
}| 版本 | 变更 |
|---|---|
v15.0.0-RC | params 和 searchParams 现在是 Promise。提供了 代码转换工具。 |
v13.0.0 | 引入了 page。 |