用途 该技能面向 Next.js 项目开发，整理路由、数据获取、服务端组件与部署等常见开发模式，供在用户涉及 "next.js"、"nextjs"、"app router"、"pages router" 等话题时参考使用。
App Router 与 Pages Router App Router（Next.js 13.4+）推荐用于新项目；Pages Router 仍受支持。需要 Server Components、流式渲染、Server Actions、嵌套布局或并行路由时使用 App Router；维护已有代码库或依赖尚不支持 App Router 的库时使用 Pages Router。两者可以共存：app/ 目录使用 App Router，pages/ 目录使用 Pages Router，但不要在两者中定义相同路由。
基于文件的路由（App Router） app/ 目录中包含 layout.tsx（根布局，必需，须含 <html> 与 <body>）、page.tsx（首页路由）、loading.tsx（Suspense 回退）、error.tsx（错误边界，须为 Client Component）、not-found.tsx（404 界面）、global-error.tsx（根布局错误边界）、template.tsx（类似 layout 但导航时重新挂载）。layout.tsx 在导航间保持；page.tsx 使路由可公开访问；loading.tsx 自动将页面包裹于 <Suspense>；error.tsx 需要 "use client" 并接收 error 与 reset 属性。
Server Components 与 Client Components App Router 中所有组件默认是 Server Components，仅在服务器运行，可直接访问数据库/密钥，不能使用 hooks 或事件处理器，可减少客户端包体积。Client Components 需首行写 "use client"，用于交互、hooks、浏览器 API，首次加载仍会 SSR 然后 hydration。组合模式：保持 Server Components 作为外层包裹，将 Client Components 作为 children 传入，仅在确需时添加 "use client"。
数据获取 App Router 中可使用 fetch：默认无限缓存（类似 getStaticProps）、每 60 秒重新验证（{ next: { revalidate: 60 } }，类似 ISR）、不缓存（{ cache: "no-store" }，类似 getServerSideProps）。非 fetch 数据源可用段级配置 export const revalidate = 60 或 export const dynamic = "force-dynamic"。Pages Router 使用 getStaticProps（构建时或 ISR）、getServerSideProps（每次请求）、getStaticPaths（定义动态路径）。
Server Actions Server Actions 是可在表单和 Client Components 中调用的服务端函数，通过 "use server" 声明，可配合 revalidatePath 与 redirect 使用；也可在 Client Components 中用 startTransition 调用，始终需在服务端校验输入。
动态路由 app/blog/[slug]/page.tsx 匹配 /blog/hello-world；app/docs/[...catchAll]/page.tsx 匹配 /docs/a、/docs/a/b/c；app/shop/[[...optional]]/page.tsx 匹配 /shop、/shop/a、/shop/a/b。可配合 generateStaticParams 生成静态路径。
路由组与并行路由 路由组用括号组织而不影响 URL，如 app/(marketing)/about/page.tsx 对应 /about，每组可有自己的 layout.tsx。并行路由使用 @ 前缀的插槽在同一布局中同时渲染，如 app/@analytics/page.tsx、app/@team/page.tsx。
中间件 在项目根或 src/ 定义 middleware.ts，在请求完成前于 Edge Runtime 运行。可读取 cookie 进行重定向、基于 geo 重写、设置响应头，并通过 config.matcher 限定匹配范围。应保持中间件轻量，避免重计算或大依赖。
API 路由 App Router 使用 Route Handlers（app/api/posts/route.ts），导出 GET、POST 等函数，支持 GET、POST、PUT、PATCH、DELETE、HEAD、OPTIONS，仅 GET 的路由文件默认被缓存。Pages Router 使用 pages/api/posts.ts 默认导出 handler。
图片优化 使用 next/image 的 Image 组件，可导入本地图片或指定外部图片及 width/height/sizes。首屏图片加 priority 关闭懒加载；sizes 帮助浏览器选择正确 srcset；外部域名需在 next.config.js 配置 remotePatterns；fill 属性配合定位父容器实现自适应填充。
元数据与 SEO 可导出静态 metadata 对象，或使用 generateMetadata 动态生成。可通过 app/sitemap.ts 与 app/robots.ts 生成站点地图与 robots 规则。
环境变量 NEXT_PUBLIC_ 前缀变量在构建时内联进客户端包，对浏览器可见；其余变量仅服务端可用（Server Components、Route Handlers、Middleware）。本地覆盖使用 .env.local，提交 .env.example 占位。可考虑使用 @t3-oss/env-nextjs 或 zod 做启动校验。
缓存 包含四层：请求记忆化（同 URL/选项的重复 fetch 在单次渲染内去重）、数据缓存（fetch 响应持久化，可用 revalidatePath、revalidateTag 或基于时间失效）、完整路由缓存（静态路由以 HTML + RSC payload 缓存）、路由缓存（浏览器中按会话缓存 RSC payload）。可用 revalidateTag、revalidatePath 或 export const dynamic = "force-dynamic" 失效。可在 next.config.js 中通过 experimental.staleTimes 调整路由缓存。
部署 Vercel：推送至已连接的 Git 仓库，零配置，支持 Edge Functions、ISR、图片优化。自托管：next build && next start -p 3000。Docker：需在 next.config.js 中设置 output: "standalone"，使用多阶段构建复制 .next/standalone 等。静态导出：设置 output: "export"，输出到 out/，不支持 ISR、中间件、非 GET 路由处理器或图片优化。
常见模式 认证中间件可通过公开路径列表与 cookie 会话重定向；国际化（i18n）可在中间件中检测 locale 并重写；动态 OG 图片可使用 next/og 的 ImageResponse（app/api/og/route.tsx）；性能方面包括使用 Suspense 流式渲染、实验性部分预渲染、Promise.all 并行获取数据、最小化 "use client"、用 next/dynamic 懒加载重组件、使用 next/font 优化字体、使用 @next/bundle-analyzer 分析包、数据展示优先 Server Components、使用 React.cache 做请求级去重。
限制 该技能为开发模式参考，未提供具体收费、价格或平台限制信息；静态导出模式存在上述明确限制。