Next.js全栈指南

解决的问题

在 Next.js App Router 项目中，团队常面临三类工程化痛点：一是路由与组件分层混乱，layout.tsx/page.tsx等文件的职责边界模糊，Server Components与Client Components的划分缺乏统一标准；二是数据获取策略碎片化，服务器端缓存、客户端状态管理与流式渲染的组合方式不清晰，导致性能瓶颈难以定位；三是认证与性能优化缺乏方向，middleware拦截规则与认证方案选型（如NextAuth.js/Auth.js/Clerk）未形成可复用的决策链路。

核心能力与工作流程

该技能基于 Vercel 官方优选实践，提供从路由设计到部署配置的全流程指导，核心能力覆盖架构设计、数据获取、认证集成与性能优化四大维度。其关键步骤如下：

• App Router 架构搭建：定义文件系统路由规则（如loading.tsx/error.tsx），明确 Server Components（默认）与Client Components（'use client'）的分层逻辑，规范app/components/lib/actions/types目录结构。
• 数据获取策略设计：在 Server Components中采用async/await+fetch自动缓存去重，通过'use server'定义 Server Actions处理表单提交，结合revalidatePath/revalidateTag控制重验证，客户端可选SWR/TanStack Query管理状态，并用Suspense+loading.tsx实现流式渲染。
• 中间件与认证实现：用middleware.ts拦截请求完成认证检查、重定向与A-B测试，提供NextAuth.js/Auth.js（开源）、Better Auth、Clerk（托管）等认证方案的选型与集成步骤。
• 性能优化实施：根据场景选择SSG（构建时生成）、SSR（请求时渲染）、ISR（静态+定时更新）或Streaming渲染策略，结合next/image/next/font/next/script等内置优化工具达成Core Web Vitals目标。

适用边界

该技能聚焦于Next.js全栈开发的通用最佳实践，内容基于Vercel官方推荐方案，需结合具体业务场景调整配置（如认证方案选型需考虑项目安全等级与维护成本）。涉及版本更新或特定生态集成（如第三方UI库）时，建议参考对应组件的最新文档。