SuperAPI AI 工具集

nextjs-app-router

前端与建站

查看项目

更新于 10-15 22:13

技能介绍

用途:按 Next.js App Router 的文件系统约定配置路由,用嵌套布局组织共享 UI,并处理加载、错误与 404 状态。

主要能力与文件约定:page.tsx 定义路由 UI;layout.tsx 提供包裹 children 且在导航间保持的共享 UI;loading.tsx 作为 Suspense 边界;error.tsx 为错误边界(必须为客户端组件,提供 reset: () => void);route.ts 为服务端 API 端点;not-found.tsx 处理未找到状态。

结构组织:用括号路由组 (auth) 组织功能但不影响 URL;用下划线私有文件夹 _lib 排除在路由外;用动态路由 [slug] 或 [...slug] 捕获全部;用生成静态路径 generateStaticParams。并行路由 @modal 需在父布局加入 slot 并提供 default.tsx 兜底;拦截路由 (.)route 用于仪表盘等高级布局。

数据与安全:Next.js 15+ 中始终 await params: Promise、searchParams、cookies() 与 headers()。用 middleware.ts 做边缘鉴权与重定向;所有 route.ts 需做鉴权检查。默认使用 React Server Components,仅在叶子节点为交互(hooks/事件)加 'use client'。

新建路由流程:创建 app/dashboard/page.tsx 作为服务端组件;创建 app/dashboard/layout.tsx 返回 {children};创建 loading.tsx 作为 Suspense 边界;创建带 'use client' 的 error.tsx;await 异步 API。

最佳实践与反模式:传给客户端组件的 props 需可序列化;组件、样式与测试可就近放在路由文件夹内;根布局 app/layout.tsx 负责 <html> 与 <body>。不要漏 await 异步 API,不要在树根加 'use client',不要在嵌套布局放 <html>/<body>,不要缺少 error.tsx。