第 1 章：Next.js 简介与核心理念

本章是《Next.js 完全指南》系列的开篇章节。读完本章，你将建立对 Next.js 的系统性认知：它为什么存在、它解决了什么问题、它如何演进、以及为什么 2025 年的新项目应该选择 App Router。

1.1 Next.js 的出现背景

React 的辉煌与局限

2013 年，Facebook 开源 React，彻底改变了前端开发范式。组件化思维、虚拟 DOM、单向数据流——这些概念让开发者第一次能够以声明式的方式构建复杂 UI。

但 React 从诞生之日起，就有一个明确的定位：

React 是一个用于构建用户界面的 JavaScript 库（Library），而不是一个完整的应用框架（Framework）。

这句话听起来很克制，但它带来了一个现实问题：React 只负责 UI 层，其他一切都需要你自己拼凑。

一个典型 React 项目的"工具清单"

如果你要用纯 React 构建一个生产级应用，你至少需要以下工具：

react                    # UI 库
react-router-dom         # 路由管理
redux / zustand          # 状态管理
axios / swr / react-query # 数据获取
webpack / vite           # 构建工具
express / koa            # 后端服务（如果需要 SSR）
helmet / cors            # 安全中间件
react-helmet             # SEO meta 标签
...

这套组合拳的问题不在于"不能用"，而在于：

1. 组合方式无限多：每个团队的选型不同，新人入职成本巨大
2. 版本兼容地狱：工具之间的版本冲突是常态
3. 性能优化靠自觉：代码拆分、懒加载、图片优化都需要手动配置
4. SEO 是额外工作：React 默认只支持 CSR（客户端渲染），SEO 需要额外方案

Next.js 的答案

2016 年 10 月，Vercel（当时还叫 ZEIT）发布了 Next.js 1.0，核心理念是：

在 React 的基础上，提供一套开箱即用的全栈解决方案，让开发者专注于业务逻辑，而不是基础设施。

Next.js 1.0 就内置了：

• 文件系统路由：文件即路由，无需手写路由表
• 服务端渲染（SSR）：开箱即用，无需配置 Express
• 自动代码拆分：按路由自动拆分 Bundle
• 内置 Webpack 配置：零配置启动，支持自定义

这套"约定优于配置"的哲学，让 Next.js 迅速成为 React 生态中最受欢迎的全栈框架。

1.2 Next.js 与 React 的关系

库 vs 框架：一个经典问题

在软件工程中，“库"和"框架"有一个本质区别：

React 是库，Next.js 是框架。

类比：React 是发动机，Next.js 是整车。你可以用 React 发动机自己造一辆车，但 Next.js 已经帮你造好了一辆可以直接上路的特斯拉。

Next.js 在 React 之上做了什么？

┌─────────────────────────────────────────────────┐
│                  Next.js 框架层                  │
├─────────────────────────────────────────────────┤
│  路由系统  │  渲染策略  │  数据获取  │  构建优化  │
│  (App Router)│  (SSR/SSG/ISR)│  (fetch/Actions)│  (Turbopack)│
├─────────────────────────────────────────────────┤
│              React 核心（UI 库）                 │
│  组件模型 │ 虚拟 DOM │ Hooks │ Concurrent Mode │
├─────────────────────────────────────────────────┤
│              JavaScript / TypeScript             │
├─────────────────────────────────────────────────┤
│           Node.js / Edge Runtime                 │
└─────────────────────────────────────────────────┘

具体来说，Next.js 在 React 之上提供了：

1. 文件系统路由：app/page.tsx 自动映射为 / 路由，无需手写 react-router 配置
2. 混合渲染策略：每个页面可以独立选择 SSR、SSG、ISR 或 CSR
3. 服务端组件（RSC）：组件在服务端执行，不发送 JS 到客户端
4. API 路由：在同一个项目中编写后端接口
5. 自动优化：图片懒加载、字体子集化、代码拆分
6. 部署集成：与 Vercel 深度集成，也支持 Docker、Cloudflare 等平台

React 团队的态度

React 官方文档在 2023 年明确推荐：

For production applications, we recommend using a framework like Next.js.
（对于生产应用，我们推荐使用 Next.js 等框架。）

这不是客套话。React 团队甚至将一些核心特性（如 Server Components）的参考实现放在了 Next.js 中。可以说，Next.js 已经成为 React 生态的事实标准框架。

1.3 演进路径：从 SPA 到全栈框架

理解 Next.js 的演进路径，有助于你理解它为什么做出这些设计决策。

第一阶段：jQuery 时代（2006-2013）

HTML + CSS + jQuery

• 特点：直接操作 DOM，页面跳转靠 <a> 标签
• 优点：简单直观，SEO 友好
• 缺点：代码难以维护，复杂交互写起来痛苦

第二阶段：SPA 浪潮（2013-2018）

React / Vue / Angular + CSR

• 特点：单页应用（Single Page Application），页面无刷新，所有逻辑在浏览器执行
• 优点：用户体验流畅，组件化开发
• 缺点：首屏白屏时间长、SEO 差、JS Bundle 体积大

典型问题：

<!-- SPA 的 HTML 只是一个空壳 -->
<div id="root"></div>
<script src="bundle.js"></script>

搜索引擎爬虫看到的是空 <div>，用户看到的是 3-5 秒白屏。

第三阶段：SSR 回归（2018-2020）

Next.js 9+ / Nuxt.js

• 特点：服务端渲染（Server-Side Rendering），服务端生成完整 HTML
• 优点：首屏快、SEO 好
• 缺点：服务器负载高、每次请求都要渲染

Next.js 9 的突破：引入了 getServerSideProps 和 getStaticProps，让开发者可以为每个页面选择 SSR 或 SSG。

第四阶段：Jamstack 与静态优先（2020-2022）

Next.js 10-12 + Vercel / Netlify

• 特点：静态生成（SSG）+ CDN 分发，按需增量再生（ISR）
• 优点：性能极佳、成本低、可扩展性强
• 缺点：不适合高度动态的应用

Next.js 10 的突破：引入了 next/image 自动图片优化和 next/font 字体优化。

Next.js 12 的突破：引入了 SWC 编译器（Rust 编写），构建速度提升 3 倍。

第五阶段：React 18 与并发特性（2022-2023）

React 18 + Concurrent Mode + Suspense

• 特点：React 引入并发渲染、Suspense、Transitions
• Next.js 13 的突破：发布了全新的 App Router，基于 React 18 的并发特性重新设计

App Router 带来了：

• React Server Components（RSC）：组件在服务端执行，零客户端 JS
• Streaming：流式渲染，页面分段加载
• 嵌套布局（Nested Layouts）：布局可以嵌套，共享状态

第六阶段：全栈统一（2023-2025）

Next.js 14-15 + App Router + Server Actions

• 特点：前后端完全统一，Server Actions 让你在服务端直接执行函数
• Next.js 14 的突破：
  • Server Actions 稳定版
  • Turbopack（Rust 打包器）稳定版
  • 性能优化：53% 更快的本地服务器启动，94% 更快的代码更新
• Next.js 15 的突破：
  • 缓存策略变更：fetch 默认 no-store（不再自动缓存）
  • 部分预渲染（Partial Prerendering）预览版

演进路径总结

2006-2013  jQuery          手动操作 DOM
2013-2018  React SPA       组件化，但 SEO 差、首屏慢
2018-2020  Next.js SSR     服务端渲染，但服务器负载高
2020-2022  Next.js SSG/ISR 静态优先，但不适合动态应用
2022-2023  Next.js App Router  RSC + Streaming，但学习曲线陡
2023-2025  Next.js 14-15   Server Actions + Turbopack，全栈统一

1.4 Next.js 的核心哲学

Next.js 的设计哲学可以概括为三个关键词：

1. 约定优于配置（Convention over Configuration）

问题：React 项目的目录结构、路由配置、构建配置都是"自由发挥"的，导致每个项目都不一样。

Next.js 的答案：用约定代替配置。

app/
  page.tsx        → 自动映射为 / 路由
  about/
    page.tsx      → 自动映射为 /about 路由
  blog/
    [slug]/
      page.tsx    → 自动映射为 /blog/:slug 动态路由

你不需要写一行路由配置代码，文件结构就是路由结构。

更多约定：

• layout.tsx：布局组件，自动嵌套
• loading.tsx：加载状态，自动触发 Suspense
• error.tsx：错误边界，自动捕获子组件错误
• not-found.tsx：404 页面

2. 渐进式复杂度（Progressive Complexity）

问题：很多框架一上来就让你学习 20 个概念，学习曲线陡峭。

Next.js 的答案：从简单开始，按需引入复杂度。

最简单的 Next.js 应用：

// app/page.tsx
export default function Home() {
  return <h1>Hello, Next.js!</h1>;
}

就这一个文件，你已经有了一个可以运行的应用。

需要数据获取？ 加一个 async：

// app/page.tsx
async function getPosts() {
  const res = await fetch('https://api.example.com/posts');
  return res.json();
}

export default async function Home() {
  const posts = await getPosts();
  return (
    <ul>
      {posts.map(post => <li key={post.id}>{post.title}</li>)}
    </ul>
  );
}

需要交互？ 加一个 "use client"：

// app/counter.tsx
"use client";

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>;
}

需要 API？ 加一个 route.ts：

// app/api/hello/route.ts
export async function GET() {
  return Response.json({ message: 'Hello, API!' });
}

每一步都是可选的，每一步都很简单。你可以只用 Next.js 的 20% 功能，也可以用 100%。

3. 性能即默认（Performance by Default）

问题：在 React 中，性能优化是"额外工作”——你需要手动配置代码拆分、图片优化、字体优化。

Next.js 的答案：性能优化内置，开箱即用。

示例：next/image 自动做了多少事？

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero"
  width={800}
  height={600}
/>

这一行代码背后，Next.js 自动做了：

1. 响应式尺寸：根据设备生成多个尺寸（400w、800w、1200w）
2. 现代格式：自动转换为 WebP/AVIF（体积减少 30-50%）
3. 懒加载：图片进入视口才加载
4. 占位符：加载时显示模糊占位
5. 防止布局偏移：预留空间，避免 CLS（Cumulative Layout Shift）

如果你用纯 React，这些都需要手动实现。

1.5 App Router vs Pages Router

Next.js 目前有两套路由系统：

核心差异对比

为什么新项目应该选 App Router？

1. React 官方的推荐方向

React 团队将 Server Components 作为 React 的未来，而 App Router 是 RSC 的参考实现。

2. 性能优势显著

RSC 组件在服务端执行，不发送 JS 到客户端。对于一个典型的电商页面，App Router 可以减少 40-60% 的客户端 JS 体积。

3. 更好的数据获取模型

Pages Router 的 getServerSideProps 需要在页面组件外部定义，数据通过 props 传递：

// Pages Router
export async function getServerSideProps() {
  const posts = await fetchPosts();
  return { props: { posts } };
}

export default function Page({ posts }) {
  return <ul>{posts.map(post => <li>{post.title}</li>)}</ul>;
}

App Router 直接在组件内部 fetch，更符合直觉：

// App Router
async function getPosts() {
  const res = await fetch('https://api.example.com/posts');
  return res.json();
}

export default async function Page() {
  const posts = await getPosts();
  return <ul>{posts.map(post => <li>{post.title}</li>)}</ul>;
}

4. Server Actions 简化后端逻辑

Pages Router 中，表单提交需要创建 API 路由：

// Pages Router
// pages/api/submit.ts
export default async function handler(req, res) {
  const data = req.body;
  await saveToDatabase(data);
  res.json({ success: true });
}

// pages/form.tsx
export default function Form() {
  const handleSubmit = async (e) => {
    e.preventDefault();
    await fetch('/api/submit', {
      method: 'POST',
      body: JSON.stringify({ name: 'Alice' }),
    });
  };
  return <form onSubmit={handleSubmit}>...</form>;
}

App Router 的 Server Actions 让你在组件内直接调用服务端函数：

// App Router
// app/actions.ts
"use server";

export async function submitForm(formData: FormData) {
  const name = formData.get('name');
  await saveToDatabase({ name });
}

// app/form.tsx
import { submitForm } from './actions';

export default function Form() {
  return (
    <form action={submitForm}>
      <input name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

5. 嵌套布局更灵活

Pages Router 只有一个全局布局（_app.tsx），所有页面共享。

App Router 支持嵌套布局，每个路由段可以有自己的布局：

app/
  layout.tsx          # 全局布局（Header、Footer）
  page.tsx
  dashboard/
    layout.tsx        # Dashboard 布局（Sidebar）
    page.tsx
    settings/
      layout.tsx      # Settings 布局（Tab 导航）
      page.tsx

什么时候用 Pages Router？

只有两种情况：

1. 维护老项目：已有项目使用 Pages Router，没必要迁移
2. 极简静态站点：只需要几个静态页面，不需要 RSC、Server Actions 等特性

对于 2025 年的新项目，毫无疑问选择 App Router。

1.6 适用场景与价值

Next.js 的灵活性让它适用于多种场景。以下是四类典型应用：

1. 内容站（博客、文档、营销页）

特点：

• 页面数量多，但交互少
• 内容更新频率低（几天/几周一次）
• SEO 是核心指标

Next.js 的优势：

• SSG + ISR：构建时生成静态页面，按需增量再生
• Metadata API：动态生成 SEO meta 标签
• next/image / next/font：自动优化图片和字体

示例架构：

app/
  page.tsx              # 首页（SSG）
  blog/
    page.tsx            # 博客列表（SSG + ISR，每小时再生）
    [slug]/
      page.tsx          # 博客详情（SSG + ISR）
  docs/
    [...slug]/
      page.tsx          # 文档（SSG）

推荐技术栈：

• 内容管理：MDX / Contentful / Sanity
• 部署：Vercel / Cloudflare Pages
• 分析：Vercel Analytics / Plausible

2. SaaS 应用（仪表盘、管理后台）

特点：

• 高度交互，复杂表单
• 需要用户认证、权限控制
• 数据实时性要求高

Next.js 的优势：

• Server Actions：简化后端逻辑，表单直接调用服务端函数
• Middleware：在请求进入路由前做认证、权限检查
• 嵌套布局：Dashboard 布局、Settings 布局独立管理
• 多租户支持：通过子域名路由、数据库租户隔离实现

示例架构：

app/
  (auth)/
    login/page.tsx      # 登录页
    register/page.tsx   # 注册页
  (dashboard)/
    layout.tsx          # Dashboard 布局（Sidebar）
    page.tsx            # 仪表盘首页
    settings/
      page.tsx          # 设置页
    api/
      route.ts          # API 路由
middleware.ts           # 认证、权限检查

推荐技术栈：

• 数据库：PostgreSQL + Prisma / Drizzle
• 认证：NextAuth.js / Clerk
• 部署：Vercel / Docker

3. 电商网站

特点：

• 商品页面多，需要 SEO
• 购物车、结账流程需要实时交互
• 库存、价格需要实时更新

Next.js 的优势：

• 混合渲染：商品页 SSG + ISR，购物车页 SSR
• Streaming：商品列表流式加载，提升首屏速度
• next/image：自动优化商品图片

示例架构：

app/
  page.tsx              # 首页（SSG + ISR）
  products/
    page.tsx            # 商品列表（SSG + ISR，每 10 分钟再生）
    [id]/
      page.tsx          # 商品详情（SSG + ISR）
  cart/
    page.tsx            # 购物车（SSR，实时库存）
  checkout/
    page.tsx            # 结账（SSR）

4. 后台管理系统

特点：

• 内部使用，不需要 SEO
• 复杂表格、表单、权限控制
• 数据量大，需要分页、筛选、排序

Next.js 的优势：

• RBAC 权限：Middleware + Server Actions 实现角色权限控制
• 嵌套布局：不同模块独立布局
• TypeScript：全栈类型安全

示例架构：

app/
  (admin)/
    layout.tsx          # Admin 布局（Sidebar、Header）
    page.tsx            # 仪表盘
    users/
      page.tsx          # 用户管理
      [id]/
        page.tsx        # 用户详情
    orders/
      page.tsx          # 订单管理
middleware.ts           # 权限检查

适用场景总结

本章小结

Key Takeaways

1. Next.js 是 React 的全栈框架，在 React 之上提供了路由、渲染、数据获取、构建优化、部署集成等完整解决方案
2. React 是库，Next.js 是框架：React 只负责 UI，Next.js 提供完整的应用架构
3. Web 开发经历了 6 个阶段：jQuery → SPA → SSR → SSG/ISR → App Router → 全栈统一
4. Next.js 的核心哲学：约定优于配置、渐进式复杂度、性能即默认
5. 2025 年新项目应该选择 App Router：RSC 减少客户端 JS、Server Actions 简化后端、嵌套布局更灵活
6. Next.js 适用于多种场景：内容站、SaaS、电商、后台系统，每种场景有不同的渲染策略

下一步

在下一章，我们将动手实践：使用 create-next-app 创建你的第一个 Next.js 项目，并编写第一个页面和 API。

参考资料

• Next.js 官方文档
• React 官方文档
• Next.js GitHub 仓库
• Vercel Blog: Next.js 15 Release
• React 18 Working Group: Server Components