Next.js 核心指南

Next.js 是基于 React 的全栈框架，专注于生产环境体验。

1. 渲染模式 (Rendering Modes)

• CSR (Client-Side Rendering): 标准 React 模式，浏览器渲染。
• SSR (Server-Side Rendering): getServerSideProps. 每次请求在服务器生成 HTML。
• SSG (Static Site Generation): getStaticProps. 构建时生成 HTML (CDN 缓存，最快)。
• ISR (Incremental Static Regeneration): SSG 的增强版，允许在运行时增量更新静态页面 (revalidate 属性)。

2. 路由 (Routing)

• 文件系统路由: pages/ 或 app/ 目录下的文件自动映射为路由。
• 动态路由: [id].js 或 [slug]/page.js.
• API Routes: 在 pages/api/ 下编写后端逻辑。

3. 核心特性

• App Router (Next.js 13+): 基于 React Server Components (RSC)，支持布局嵌套、流式传输。
• Image Optimization: <Image /> 组件自动优化图片格式和大小。
• Middleware: 在请求完成前允许运行代码（鉴权、重定向）。

4. 数据获取

• Server Components: 直接在组件内 async/await 获取数据 (App Router)。
• SWR / React Query: 客户端数据获取与缓存。