next.js 框架中的约定的特殊参数名称

文章目录

[1. 在 Next.js App Router 中，有以下约定的特殊参数名：](#1. 在 Next.js App Router 中，有以下约定的特殊参数名：)
- [1.1 页面组件参数](#1.1 页面组件参数)
- [1.2 路由处理器参数（Route Handlers）](#1.2 路由处理器参数（Route Handlers）)
- [1.3 Layout 组件参数](#1.3 Layout 组件参数)
- [1.4 特殊文件名约定](#1.4 特殊文件名约定)
- [1.5 文件命名约定](#1.5 文件命名约定)

1. 在 Next.js App Router 中，有以下约定的特殊参数名：

1.1 页面组件参数

params:
- 用于接收动态路由参数
- 例如在 $id$ /page.tsx 中，可以通过 params.id 获取路由中的 id 值
- 类型通常是 Promise<{ $key: string$ : string | undefined }> 或普通对象
searchParams:
- 用于接收 URL 查询参数（query parameters）
- 例如 /page?category=books 中的 category 参数
- 类型是 Promise<{ $key: string$ : string | string\[\] | undefined }>

1.2 路由处理器参数（Route Handlers）

在 route.ts 或 route.js 文件中，HTTP 方法函数接收的参数：

request:
- 包含 HTTP 请求信息
- 类型为 Request 对象
params:
- 动态路由参数（与页面组件中的 params 相同）
- 例如 /api/users/ $id$ /route.ts 中的 id 参数

1.3 Layout 组件参数

children:
- 子组件内容
- 不是 props 对象的一部分，而是直接作为参数传递
params:
- 与页面组件中的 params 相同，用于动态路由参数

1.4 特殊文件名约定

虽然不是参数，但也是 Next.js 的重要约定：

page.tsx/page.js: 页面组件文件
layout.tsx/layout.js: 布局组件文件
loading.tsx/loading.js: 加载状态组件文件
error.tsx/error.js: 错误处理组件文件
not-found.tsx/not-found.js: 404 页面组件文件
route.ts/route.js: API 路由文件
template.tsx/template.js: 模板组件文件
global-error.tsx - 全局错误组件
default.tsx - 平行路由默认组件
middleware.ts - 中间件文件
instrumentation.ts - 应用程序性能监控初始化

这些是 Next.js App Router 中主要的约定参数名，其中 params 和 searchParams 是最常用的两个页面组件参数。

1.5 文件命名约定

动态路由：
- $id$ .tsx - 单个动态参数
- $...slug$ .tsx - Catch-all 路由（捕获多个路径段）
- $\[...slug$ ].tsx - 可选 Catch-all 路由
并行路由：

-@slotName - 平行路由插槽命名约定
拦截路由：
- (...) - 上一级目录
- (.) - 当前目录
- (...)(...) - 上两级目录
- (...) - app 根目录
导出约定
- metadata - 静态元数据导出
- generateMetadata - 动态元数据生成函数
- viewport - 视口设置
- generateViewport - 动态视口生成函数
- dynamicParams - 控制动态参数行为
- revalidate - 设置缓存重新验证时间
- dynamic - 控制服务端渲染行为
- runtime - 设置运行时环境
- preferredRegion - 设置部署区域偏好
路由段配置约定

在 layout.tsx 或 page.tsx 中：

typescript 复制代码

export const dynamic = 'auto' | 'force-dynamic' | 'error' | 'force-static'
export const dynamicParams = true | false
export const revalidate = false | 0 | number
export const fetchCache = 'auto' | 'default-cache' | ... 
export const runtime = 'nodejs' | 'edge'
export const preferredRegion = 'auto' | 'global' | 'country-code'

数据获取约定
Server Components - 默认情况下组件在服务端执行
use client - 指定客户端组件指令
use server - 指定服务端 Action 函数
这些都是 Next.js App Router 中的重要约定，帮助框架理解如何处理不同的文件和功能。