一句话先给结论（面试王炸）
React 是 UI 库，Next.js 是基于 React 的全栈框架。
一、核心区别一览（先给对比表）
| 对比点 | 纯 React（CRA / Vite） | Next.js |
|---|---|---|
| 定位 | UI 库 | React 全栈框架 |
| 路由 | react-router | 文件路由 |
| 渲染方式 | CSR | CSR + SSR + SSG + ISR |
| SEO | 差 | 好 |
| 首屏性能 | 一般 | 好 |
| 接口能力 | 无 | API Routes |
| 构建复杂度 | 自己搭 | 开箱即用 |
| 适合场景 | 后台系统 | 官网 / ToC / SEO 项目 |
二、面试官真正想问的 5 个点
1️⃣ 最大本质区别是什么？
❌ 初级回答
Next.js 支持 SSR
✅ 中高级正确回答
Next.js 把"渲染时机"变成了一等公民
解释给面试官听：
-
纯 React：只能浏览器渲染
-
Next.js：
-
构建时渲染（SSG）
-
请求时渲染（SSR）
-
客户端渲染（CSR）
-
增量静态生成（ISR）
-
👉 不是能不能 SSR，而是"什么时候渲染"
2️⃣ 为什么 Next.js 首屏性能更好？
你要从 3 个层面说：
① HTML 直出
-
SSR / SSG
-
浏览器直接有内容
② 自动代码分割
-
按页面拆包
-
不需要手动配置
③ 内置优化
-
Image Optimization
-
Script 优先级
-
预加载
🔥 面试官爱听一句：
"Next.js 默认帮你做了 80% 性能优化。"
3️⃣ Next.js 为什么 SEO 好？
纯 React 的问题
-
HTML 是空壳
-
爬虫要执行 JS
Next.js 的优势
-
HTML 已有内容
-
meta 可控
-
OG 标签完整
👉 适合：
-
官网
-
活动页
-
电商
-
内容型网站
4️⃣ 路由机制区别（必问）
纯 React
<Routes>
<Route path="/user" element={<User />} />
</Routes>Next.js
pages/user.tsx🔥 面试官要你说的不是写法，而是：
路由即文件结构，天然约束项目规范
5️⃣ Next.js 为什么说是"全栈"？
你必须提到 API Routes / Server Actions
// app/api/user/route.ts
export async function GET() {}👉 好处：
-
前后端同仓
-
无需单独 Node 服务
-
天然支持部署
三、Next.js vs React 的真实使用场景
✅ 适合用纯 React 的
-
后台管理系统
-
内部系统
-
对 SEO 无要求
-
纯交互应用
📌 原因：简单、直接、部署灵活
✅ 必须用 Next.js 的
-
官网
-
ToC 产品
-
营销页面
-
内容平台
📌 原因：SEO + 首屏 + 性能
四、面试高分总结模板（你直接背）
React 更关注组件和状态管理 ，
Next.js 解决的是 渲染策略、性能、SEO 和工程规范 。
如果项目需要首屏性能和搜索引擎友好，Next.js 是更优解。
五、面试官常见追问（提前给你）
Q1：Next.js 有缺点吗？
-
架构限制多
-
不适合复杂后台
-
学习成本略高
Q2：Next.js 能完全替代后端吗？
-
❌ 不适合复杂业务
-
✅ 适合轻量 API / BFF