什么是 Next.js？它解决了 React 原生开发的哪些问题？
一、Next.js 是什么？
Next.js 是由 Vercel 开发的React 全栈框架（不是单纯的库），它基于 React 封装了一套开箱即用的工程化解决方案，核心定位是「让 React 开发更简单、更高效」，尤其擅长解决 React 在服务端渲染、路由、性能优化等方面的短板。
简单来说：React 是「积木」，Next.js 是「搭积木的图纸 + 工具包」，帮你快速搭建符合生产标准的 React 应用（小到个人博客，大到企业级电商 / 中台）。
二、React 原生开发的核心痛点（Next.js 如何解决）
React 原生（纯客户端 SPA）开发时，以下问题需要开发者手动解决，而 Next.js 内置了标准化方案：
表格
| React 原生开发的痛点 | Next.js 的解决方案 |
|---|---|
| 1. SEO 极差（爬虫抓不到内容） | 核心提供 SSR（服务端渲染）、SSG（静态生成） ：- 构建 / 请求时在服务端生成完整 HTML，爬虫能直接抓取；- 对比 React SPA：爬虫只能拿到空的 div#root，无法识别页面内容（比如博客、商品页完全无法被搜索引擎收录）。 |
| 2. 首屏加载慢（白屏时间长） | 1. 服务端渲染 / 静态生成：首屏直接返回渲染好的 HTML，用户无需等 JS 加载完成就能看到内容；2. 自动代码分割：按路由拆分 JS 包，首屏只加载当前路由所需代码，而非整个应用的 JS；3. 图片 / 字体优化：内置 next/image/next/font 实现懒加载、格式转换，减少资源体积。 |
| 3. 路由需要手动配置（如 react-router） | 提供 文件系统路由：- pages/ 目录下的文件直接对应路由（如 pages/about.js → /about）；- 13+ 版本的 App Router（app/ 目录）支持嵌套路由、动态路由（[id]/page.js），无需手写路由规则。 |
| 4. 服务端渲染 / 静态生成需手动封装 | 标准化渲染模式：- SSG（静态生成）：构建时预渲染所有页面，部署后直接复用（适合博客 / 文档）；- SSR（服务端渲染）：每次请求实时渲染（适合动态数据如电商详情）；- ISR（增量静态再生）：兼顾性能和实时性（如资讯列表）；无需开发者手动写 Node.js 服务封装渲染逻辑。 |
| 5. 工程化能力缺失（配置繁琐） | 内置全套工程化能力：- 零配置支持 TypeScript、ESLint、热更新；- 环境变量管理（区分服务端 / 客户端变量）；- 静态资源处理（public/ 目录、导入式资源）；- 中间件（Middleware）：处理路由鉴权、重定向等。 |
| 6. 全栈开发成本高（前后端联调复杂） | 内置 API 路由：- pages/api/（旧）/app/api/（新）目录可直接写后端接口，无需单独搭建 Node.js 服务；- 服务端组件（RSC）：组件可直接在服务端调用数据库 / 接口，无需跨域，简化全栈开发。 |
三、面试回答精简版（核心要点）
Next.js 是基于 React 的全栈框架，核心解决了 React 原生开发的四大问题：
- SEO 问题：提供 SSR/SSG 预渲染，让爬虫能抓取完整页面内容；
- 性能问题：首屏渲染快（服务端返回 HTML）、自动代码分割、资源优化；
- 开发效率问题：文件系统路由、内置工程化能力（无需手动配置路由 / 构建）；
- 全栈开发问题：内置 API 路由、服务端组件，简化 React 应用的服务端开发。
总结
- Next.js 核心定位：React 全栈框架，封装服务端渲染、路由、工程化等能力；
- 核心解决的痛点：SEO 差、首屏慢、路由配置繁琐、服务端渲染封装复杂；
- 核心优势：开箱即用，兼顾性能、SEO 和开发效率，是 React 生产级应用的首选框架。
