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：预装代码检查