Next.js 是什么

这一课你将能做到

1. 用自己的话说清楚 Next.js 和 React 的关系：React 是「发动机」，Next.js 是「整台车」
2. 说清纯前端 SPA（Vite + React）在首屏速度和 SEO 上的短板，以及 Next.js 怎么补上
3. 在本地跑起第一个 Next.js 项目，并在浏览器里看到页面

为什么要学

先看一个事实：你正在用的这个学习平台，前端就是 Next.js 写的。课时页、练习判题页、路线图页面，全部跑在 Next.js 的 App Router 上。也就是说，学完这门课，你就能直接读懂本站源码，甚至给它提 PR。

再说面试。2024 年之后，凡是招 React 方向的岗位，JD 里几乎都带着 Next.js。面试官最爱问的三件事——「SSR 和 CSR 区别」「Server Component 是什么」「什么时候用 SSG」——全是 Next.js 的核心概念。只会 create-react-app 的简历，和写着「用 Next.js App Router 重构过 XX 项目、首屏时间从 3s 降到 0.8s」的简历，含金量完全不同。

人话版本：React 只负责「把数据变成界面」，它不管页面怎么被用户拿到、URL 怎么路由、接口怎么部署。一个真实的商业网站还需要：搜索引擎能抓到内容（SEO）、首屏要快、要有后端接口、要能一键部署。Next.js 把这些全都打包好了——路由规则、服务端渲染、接口层、构建优化、部署方案，开箱即用。

用一个类比收尾：用 Vite + React 开发像买了一台裸发动机，路、方向盘、车轮都得自己配；Next.js 是一台整车，钥匙一拧就走，而且发动机还是你熟悉的 React。

先建立图像

一个纯 React SPA 从加载到看到内容的过程：

用户请求 URL
   ↓
返回一个几乎空白的 HTML  +  一大包 JS（几百 KB 起步）
   ↓
浏览器下载 JS → 解析 → 执行 → 向 API 请求数据
   ↓
数据回来 → React 渲染 → 用户才看到内容

缺点：首屏白屏时间长；爬虫抓到的 HTML 几乎是空的 → SEO 差

Next.js 在服务端先做了一遍工作：

用户请求 URL
   ↓
服务器直接拿到数据、渲染好 HTML → 返回「有内容的页面」
   ↓
用户立刻看到内容（爬虫也是），JS 再在背后「接管」页面实现交互

优点：首屏快、SEO 好；交互逻辑仍由 React 接管，开发体验不变

再看 Next.js 全栈的分层，注意它同时覆盖了前端和后端：

┌─────────────────────────────────────┐
│  页面层   app/ 下的 page.tsx        │ ← 文件即路由
│  组件层   Server / Client 组件      │ ← 服务端渲染 + 客户端交互
│  接口层   app/api/**/route.ts       │ ← 自己也能写后端接口
│  部署层   npm run build → Vercel / Node 服务器
└─────────────────────────────────────┘
        ↓ 数据来源（可选）
   你的 Spring Boot / 任何 REST API

本站就是这个架构的活例子：Next.js 负责页面和渲染，数据从 Spring Boot 后端的 REST 接口拿，两边通过 HTTP 分工。

跟着做

步骤 1：确认环境

Next.js 需要 Node.js 18.18 以上（Next 15 要求 18.18+，推荐 20 LTS）。打开终端检查：

node -v
# 输出 v20.x.x 即可

步骤 2：创建项目

npx create-next-app@latest my-first-next \
  --typescript --tailwind --eslint --app --src-dir

参数逐个解释：

• --typescript：用 TS 写，Next.js 对 TS 支持是一流的
• --tailwind：预装 Tailwind CSS（本站样式方案，第 9 课细讲）
• --eslint：预装代码检查
• --app：使用 App Router（本课程全程基于它）
• --src-dir：把 app/ 放进 src/ 下（本站 platform 就是 src/app 结构）

首次运行会下载依赖，等它跑完进入 my-first-next 目录。

步骤 3：启动开发服务器

cd my-first-next
npm run dev

浏览器打开 http://localhost:3000，你会看到一个默认首页。此刻已经发生了两件事：

1. Next.js 把 src/app/page.tsx 渲染成了完整 HTML 发给浏览器（右键「查看网页源代码」，能直接搜到页面上的文字——SPA 做不到这一点）
2. 它监听着文件变化，你保存代码页面就热更新

步骤 4：改一个字，看热更新

打开 src/app/page.tsx（内容是 TSX + Tailwind 类名，先不管细节）：

export default function Home() {
  return (
    <main>
      <h1>你好，Next.js</h1>
      <p>我的第一个 Next.js 页面</p>
    </main>
  );
}

把中间内容替换成上面这样，保存。浏览器无需刷新，标题立刻变化。这就是整个开发循环：改文件 → 自动更新 → 看效果。

步骤 5：认识三条核心命令

npm run dev      # 开发：热更新、错误提示详细、不做优化
npm run build    # 构建：把项目编译成生产版本（本课先感受，第 12 课细讲）
npm run start    # 运行生产版本：必须先 build

执行 npm run build，终端会列出每个路由的渲染方式标记（○ 静态 / ƒ 动态）——这个表格后面讲渲染模式的课会反复用到，现在眼熟一下即可。

讲清楚要点

1. Next.js 是 React 框架，不是新语言：JSX、组件、Hooks 全部照旧，你写的还是 React。框架提供的是路由、渲染、构建、部署这些「React 不管的事」。
2. App Router 是现行标准：Next.js 13 引入，14/15 全面成熟，新项目一律用它。老的 Pages Router 资料会干扰你，看到 pages/ 目录的教程可以直接跳过。
3. 全栈能力：app/api/**/route.ts 里能写后端接口，Server Component 能直接查数据库。但本站的用法是「Next.js 前端 + Spring Boot 后端」，接口层由 Java 提供——这是企业里最主流的组合，本课的例子都对接 REST API。
4. 渲染发生在服务端（默认）：App Router 下组件默认是 Server Component，在服务器上执行，产出的 HTML 自带内容。需要交互（useState、事件）的组件才声明 'use client'。
5. 本站就是教材：本学习平台前端是 Next.js（platform/ 目录，src/app 结构），后端是 Spring Boot。往后每课的例子都能在本站源码里找到真身，第 11 课专门带读源码。

你可能会懵的地方

• 我已经会 React 了，为什么还要学 Next.js？ 因为企业要的是「能上线的网站」而不是「能跑的 demo」。SEO、首屏性能、路由、鉴权、部署，React 本体一个都不解决。另外学会了 Next.js 才看得懂大量现代开源项目（包括本站）的代码。

• Next.js 和 Vite 冲突吗？ 不冲突，是两个层次的工具。Vite 是构建工具（也提供 dev server），Next.js 是框架（内置了自己的编译管线，基于 Turbopack/Rust）。做纯前端 SPA 用 Vite 足够；做需要 SEO、服务端渲染的站点用 Next.js。

• 前端不是该「前后端分离」吗，Next.js 怎么又全栈了？ Next.js 的「全栈」指它能自己提供 BFF（Backend for Frontend）层和页面渲染。大型系统里数据、业务、存储仍在独立后端（如本站的 Spring Boot），Next.js 负责「面向用户的那一层」。两者不矛盾。

• SSR 是不是指每秒都要服务器现算、压力很大？ 不一定。Next.js 支持静态生成（SSG）和增量再生（ISR），大部分页面可以在构建时或低频更新时提前做好，服务器压力远比想象小。选型细节是第 6 课的主题。

• 课程例子为什么都用 TypeScript？ Next.js 官方脚手架默认 TS，企业项目基本都用，本站也是 TS。语法不熟没关系，把类型标注当注释看，不影响理解逻辑。

错法对照

错法	问题	正解
用 create-react-app 学 React 再迁移	CRA 已停止维护，迁移成本高	直接从 create-next-app 起步
找 Pages Router（pages/ 目录）教程照抄	约定完全不同，越学越乱	只看 app/ 目录（App Router）的资料
在 Server Component 里写 useState	编译报错：只有 Client 组件能有状态	加 'use client'，或拆出子组件（第 4 课细讲）
把 Next.js 当「新的 React 语法」重学一遍	浪费时间，概念基本重叠	认清 80% 是 React，20% 是框架约定
Node 版本 16 直接跑 Next 15	官方要求 18.18+，会直接报错	升级到 Node 20 LTS

卡点急救

1. npx create-next-app 卡住不动：国内网络问题。给 npm 换源：npm config set registry https://registry.npmmirror.com，重试。
2. npm run dev 报端口被占用：3000 被其他进程占了。npm run dev -- -p 3001 换端口，或关掉占用进程。
3. 页面改了但浏览器没反应：确认终端里 dev 进程还活着、没有红色报错；确认改的是 src/app/ 下的文件而不是别的目录；实在不行 Ctrl+C 重启 dev。

面试常问

• Next.js 和 React 的区别？ React 是 UI 库，只解决「数据 → 视图」；Next.js 是基于 React 的全栈框架，解决路由（文件即路由）、渲染策略（SSR/SSG/ISR）、接口层（Route Handlers）、性能优化（代码分割、图片字体优化）和部署。选 Next.js 的核心动机是 SEO、首屏速度和工程化配套。

• 为什么 SPA 首屏慢、SEO 差？Next.js 怎么解决的？ SPA 返回的 HTML 是空壳，内容要等 JS 下载执行完、数据请求回来才渲染，期间白屏且爬虫抓不到正文。Next.js 在服务端预渲染出带完整内容的 HTML，用户拿到即可显示，爬虫可直接解析；之后客户端 JS 接管（水合），交互体验仍是 SPA。

• App Router 和 Pages Router 的区别？ Pages Router 把路由和组件混在一起、数据靠 getServerSideProps 等专用函数；App Router 以 app/ 目录约定路由，组件默认服务端执行（RSC），数据获取直接 async/await fetch，布局可嵌套（layout 层层叠加），还支持 loading/error 流式渲染。新项目一律 App Router。

自测三问

1. React 解决了什么问题？Next.js 在它之上补了哪几件事？
2. 纯 SPA「首屏慢、SEO 差」的完整因果链是什么？
3. npm run dev 和 npm run build + npm run start 的区别是什么？

小结一句话

Next.js = React + 路由 + 服务端渲染 + 接口层 + 部署方案，是「能直接上生产」的 React 框架；本学习平台的前端就是它，这门课带你从零写到读懂本站源码。

延伸

• Next.js 官方文档：Getting Started
• 下一课：动手创建项目，逐个认识目录结构。