MD 状态：🌿 分类：前端框架更新：2026/5/29

Next.js

[!abstract] 一句话定义 Next.js 是一个基于 React 的全栈 Web 框架，它通过内置的服务端渲染、路由系统和优化工具，让开发者无需手动配置就能构建生产级应用。

为什么需要它？

纯 React 应用（SPA）有两个致命问题：SEO 不友好 —— 搜索引擎爬虫看到的是空白页面，因为内容需要 JavaScript 执行后才能渲染；首屏性能差 —— 用户必须等待整个 JavaScript 包下载执行后才能看到内容。Next.js 通过**服务端渲染（SSR）和静态生成（SSG）**解决了这些问题，让页面在到达用户浏览器前就已经是完整的 HTML。

核心直觉

把 Next.js 想象成一个智能餐厅：

纯 React SPA = 自助厨房（食材给你，自己做，上菜慢，外卖小哥找不到门牌号）
Next.js = 智能餐厅（厨师提前做好（SSG）或现做（SSR），上菜快，外卖小哥能直接找到门牌号（SEO））

关键区别：Next.js 让 React 应用从”客户端渲染”变成了”服务端渲染 + 客户端 hydration”。

它是怎么工作的？

整体架构

graph TB
    subgraph 用户请求
        A[浏览器] -->|HTTP 请求| B[Next.js 服务器]
    end
    
    subgraph 服务端处理
        B --> C{路由匹配}
        C -->|静态页面| D[返回预生成的 HTML]
        C -->|动态页面| E[服务端渲染 React 组件]
        C -->|API 请求| F[执行 API Route]
    end
    
    subgraph 客户端处理
        D --> G[HTML + JS 发送到浏览器]
        E --> G
        F --> H[返回 JSON 数据]
        G --> I[Hydration: React 接管交互]
    end
    
    style A fill:#e1f5fe
    style B fill:#f3e5f5
    style I fill:#c8e6c9

渲染策略

Next.js 提供三种渲染策略，开发者可以根据页面特性选择：

graph LR
    A[页面组件] --> B{渲染策略}
    B --> C[SSG<br/>静态生成]
    B --> D[SSR<br/>服务端渲染]
    B --> E[ISR<br/>增量静态再生]
    
    C --> F[构建时生成 HTML<br/>适合不常变化的内容]
    D --> G[请求时生成 HTML<br/>适合个性化内容]
    E --> H[构建时生成 + 定期更新<br/>适合偶尔变化的内容]

1. 静态生成（SSG）

// pages/blog/[slug].js
export async function getStaticProps({ params }) {
  const post = await getPost(params.slug);
  return { props: { post } };
}

export async function getStaticPaths() {
  const posts = await getAllPosts();
  return {
    paths: posts.map(p => ({ params: { slug: p.slug } })),
    fallback: false,
  };
}

2. 服务端渲染（SSR）

// pages/dashboard.js
export async function getServerSideProps(context) {
  const user = await getUser(context.req.cookies.token);
  return { props: { user } };
}

3. 增量静态再生（ISR）

// pages/products/[id].js
export async function getStaticProps({ params }) {
  const product = await getProduct(params.id);
  return {
    props: { product },
    revalidate: 60, // 每 60 秒重新生成
  };
}

关键组件 / 核心要素

组件	作用	类比
App Router	基于文件系统的路由，支持 React Server Components	餐厅的楼层导航图，自动根据文件位置生成
页面（Pages）	每个文件对应一个路由，导出 React 组件	餐厅的每道菜，有自己的位置和内容
布局（Layouts）	嵌套布局，页面间共享 UI 结构	餐厅的桌椅布置，每桌都有但可以定制
API Routes	服务端 API 端点，无需单独后端服务	餐厅的后厨，处理特殊请求
中间件（Middleware）	请求到达前的拦截和处理	餐厅的迎宾员，检查预约、重定向
图片优化	自动优化图片格式、大小、懒加载	餐厅的摆盘，根据盘子大小调整菜品

与相关概念的关系

[!info] vs React React 是 UI 库，只负责渲染组件；Next.js 是基于 React 的框架，提供了路由、渲染策略、优化工具等完整解决方案。React 像是发动机，Next.js 是整辆车。

[!info] vs Nuxt.js Nuxt.js 是 Vue 生态的全栈框架，功能类似 Next.js。选择取决于团队技术栈：React 团队选 Next.js，Vue 团队选 Nuxt.js。

[!info] vs Remix Remix 也是 React 全栈框架，但更强调 Web 标准（Fetch API、FormData）和嵌套路由。Next.js 生态更大，Remix 更”Web 原生”。

[!note] 依赖于 React Next.js 的核心是 React，所有组件都是 React 组件。理解 React 的组件、状态、生命周期是使用 Next.js 的前提。

[!tip] 被 Vercel 部署优化 Next.js 由 Vercel 公司开发，部署到 Vercel 平台时有最佳性能优化（边缘网络、自动 ISR 等）。

典型应用场景

企业官网 / 营销页面 — 需要 SEO，内容不常变化，用 SSG 构建时生成，性能最优
电商产品页 — 产品信息偶尔更新，用 ISR 定期重新生成，兼顾性能和新鲜度
后台管理系统 — 个性化数据，用 SSR 每次请求时渲染，确保数据实时
博客 / 文档站 — 内容为主，Markdown 渲染，用 SSG + ISR 组合
全栈应用 — 利用 API Routes 构建后端，无需单独部署后端服务

常见误解与陷阱

[!danger] ❌ 误以为：Next.js 只能做 SSR ✅ 实际上：Next.js 支持 SSG、SSR、ISR 三种策略，甚至可以纯客户端渲染（SPA 模式）。选择哪种取决于页面需求。

[!danger] ❌ 误以为：用了 Next.js 就自动 SEO 好 ✅ 实际上：SEO 取决于内容和元数据配置。Next.js 提供了 <Head> 组件和 metadata API，但需要开发者正确使用。

[!danger] ❌ 误以为：App Router 和 Pages Router 可以混用 ✅ 实际上：虽然技术上可以共存，但官方建议统一使用 App Router（新项目）或 Pages Router（老项目维护）。混用会增加复杂度。

[!danger] ❌ 误以为：getServerSideProps 比 getStaticProps 快 ✅ 实际上：SSG（getStaticProps）在构建时生成，访问时直接返回静态文件，通常比 SSR（getServerSideProps）更快。SSR 每次请求都要执行服务端逻辑。

关联笔记

前置知识：React · JavaScript · Node.js 同族概念：Nuxt.js · Remix · Gatsby · Astro 应用场景：前后端分离 · SEO优化 · 静态站点生成 · 全栈开发 部署平台：Vercel · Netlify · Docker