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 路由

  -@slotName - 平行路由插槽命名约定

• 拦截路由：

  • (...) - 上一级目录
  • (.) - 当前目录
  • (...)(...) - 上两级目录
  • (...) - app 根目录

• 导出约定

  • metadata - 静态元数据导出
  • generateMetadata - 动态元数据生成函数
  • viewport - 视口设置
  • generateViewport - 动态视口生成函数
  • dynamicParams - 控制动态参数行为
  • revalidate - 设置缓存重新验证时间
  • dynamic - 控制服务端渲染行为
  • runtime - 设置运行时环境
  • preferredRegion - 设置部署区域偏好

• 路由段配置约定

  在 layout.tsx 或 page.tsx 中：

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