文章目录
- [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 路由
-@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 中的重要约定，帮助框架理解如何处理不同的文件和功能。