用途
本技能为构建现代 Next.js 应用提供全面指导，内容基于官方 Next.js 文档，涵盖 App Router、Server Components、数据获取模式、路由、API 路由、中间件以及全栈开发技术。
适用场景
根据资料，以下情况适合使用本技能：
- 构建带服务端渲染（SSR）的全栈 React 应用
- 创建带增量静态再生（ISR）的静态站点
- 使用 React Server Components 开发现代 Web 应用
- 使用无服务器路由处理器构建 API 后端
- 实现带元数据和 Open Graph 的 SEO 优化应用
- 创建内置优化的生产级 Web 应用
- 构建电商、博客、仪表盘或内容驱动型站点
- 实现认证、数据获取和复杂路由模式
- 自动优化图片、字体和性能
- 部署具备边缘计算能力的无服务器应用
核心概念
App Router
App Router 是 Next.js 基于 React Server Components 构建的现代路由系统，使用 app 目录进行基于文件的路由。资料给出了基本目录结构，包括 layout.tsx（根布局，必需）、page.tsx（首页）、loading.tsx、error.tsx、not-found.tsx，以及 about/、blog/[slug]/ 等路由示例。根布局接收 children 并返回 html/body 结构；页面组件为默认导出的函数组件。
Server Components
Server Components 是在服务端渲染的 React 组件，是 App Router 中的默认组件，可提供更好的性能。资料展示了服务端组件（async 函数中直接 await fetch）、客户端组件（使用 'use client' 指令与 useState）以及两者混用的示例：服务端组件获取数据后，将客户端组件作为子组件渲染以实现交互。
数据获取
Next.js 扩展了原生 fetch() API，支持自动缓存和重新验证。资料给出四种模式：
- 静态数据获取（默认）：cache: 'force-cache'，等价于 getStaticProps
- 动态数据获取：cache: 'no-store'，等价于 getServerSideProps
- 重新验证（ISR）：next: { revalidate: 60 }，每 60 秒重新验证
- 并行数据获取：使用 Promise.all 同时请求多个接口
- 顺序数据获取：先获取用户，再基于用户偏好获取推荐
路由
Next.js 在 app 目录中使用基于文件系统的路由。资料涵盖：
- 动态路由：app/blog/[slug]/page.tsx，配合 generateStaticParams 在构建时生成静态页面
- 捕获所有路由：app/docs/[...slug]/page.tsx，/docs/a/b/c 对应 params.slug = ['a','b','c']
- 可选捕获所有路由：app/shop/[[...slug]]/page.tsx
- 路由组：使用 (marketing)、(shop) 等括号目录，不出现在 URL 中
- 并行路由：使用 @analytics、@team 等命名插槽，在布局中作为 props 接收
- 拦截路由：使用 (.)photo 等约定拦截导航
布局
布局包裹页面并在导航间保持状态。资料展示了根布局、嵌套布局（如 dashboard/layout.tsx）以及模板（template.tsx，每次导航重新创建实例）。
加载 UI
特殊的 loading.tsx 文件配合 React Suspense 创建加载状态。资料展示了 loading.tsx 示例以及使用 Suspense 包裹慢组件的流式渲染示例。
错误处理
特殊的 error.tsx 文件通过错误边界处理错误，必须是客户端组件，接收 error 和 reset 参数。资料还展示了 global-error.tsx（全局错误）和 not-found.tsx（404 页面）。
API 路由
路由处理器允许使用 Web Request 和 Response API 创建 API 端点。资料涵盖：
- 基本 API 路由：app/api/hello/route.ts 导出 GET 函数
- 动态路由处理器：app/api/posts/[id]/route.ts，支持 GET 和 DELETE
- 带请求体的 POST 请求
- 读取请求头（如 authorization）
- 读取查询参数（searchParams）
- CORS 头设置与 OPTIONS 处理
中间件
中间件在请求完成前运行，可修改响应。资料展示了：
- 基本中间件：修改请求头并返回 NextResponse.next()
- 认证中间件：检查 cookie 中的 token，未登录重定向到 /login
- 地理定位与重写：根据 request.geo?.country 重写 URL
- 限流：使用 @upstash/ratelimit 和 @upstash/redis 实现滑动窗口限流
中间件通过 config.matcher 指定匹配路径。
元数据与 SEO
Next.js 提供 Metadata API 用于定义页面元数据。资料展示了静态元数据示例：在页面中导出 metadata 对象，包含 title、description 等字段。
限制
资料未提供关于该技能的安装方式、收费模式、平台支持、性能效果或具体使用步骤的说明，这些信息暂未提供。