用途:为 Next.js 应用提供类型安全的路由、导航与 URL 状态管理方案,适用于页面、布局、路由处理函数以及查询参数场景。
主要能力:
- 路由 Props 辅助类型(Next.js 15.5+):全局可用 PageProps、LayoutProps、RouteContext,无需导入。RouteContext 用于为路由处理函数上下文参数做类型推断;PageProps 用于页面组件的 params 与 searchParams;LayoutProps 用于布局组件的 children 与并行路由插槽。params 与 searchParams 为 Promise,需要 await。
- 类型化路由(Next.js 15.5+):根据文件结构自动生成类型,TypeScript 会在编译期捕获 <Link> 中的非法路由;Route 类型可用于 props;非字面量字符串可用 as Route,例如 ('/blog' + slug) as Route。
- 自定义参数 Hook:不要直接使用 Next.js 的 useParams,改用 @/hooks/use-params 中的类型化替代。参数命名应唯一(如 [userId] 而非 [id])以获得更好推断。useTParams() 用于具体应用路由的精确类型;useLayoutParams() 用于布局,返回所有参数为可选;带路由前缀的 useLayoutParams<'/complaints/[complaintId]'>() 对精确匹配路由参数必填、关联路由参数可选。
- URL 查询状态:不要使用 useSearchParams,统一使用 nuqs 管理 URL 查询状态;按参数数据类型选择合适解析器,配置 history 模式与 clearOnDefault,更新时用 void 避免 Promise 相关 lint 问题。
使用方式:在组件中使用类型化 <Link>;在路由处理函数中用 RouteContext<'/api/users/[id]/posts/[postId]'> 并通过 await ctx.params 解构参数,可选参数路由如 [[...slug]] 得到 string[] | undefined;用 useTParams 与 useLayoutParams 获取参数;查询状态用 nuqs 的 setter 配合 void 调用。
限制:需 Next.js 15.5+ 才能使用自动生成的路由类型;不要对手写页面 props 手动类型标注,也不要用字符串拼接构造路由;具体安装命令与配置细节资料中暂未提供。