Next.js 是什么，它在 React 之上增加了什么？

Question

Accepted Answer

**Next.js** 是一个完整的 React **框架**。React 本身只是一个 UI 库——它渲染组件，但将路由、数据获取、服务器渲染和构建工具留给你。Next.js 开箱即提供了所有这些功能，以及一个服务器运行时。 ## React 单独无法做到的（而 Next.js 添加的） ```text React (library) → Next.js (framework) adds: ────────────────────────────────────────────────── UI rendering only → File-based routing (folders = routes) Client-side rendering → Server rendering (SSR), static generation (SSG), ISR You wire data fetching → Built-in data fetching + caching No backend → API routes / Route Handlers (full-stack) Manual bundling → Zero-config build, code splitting, optimization Manual → next/image (auto-optimized images), next/font ``` ## 一个具体的例子：一个路由就是一个文件 ```tsx // app/about/page.tsx → automatically served at /about export default function About() { return

About us

; } ``` 在纯 React 中，你需要安装路由器、配置路由并设置构建。在 Next.js 中，创建文件*就是*路由。 ## 为什么团队选择它 - **SEO 和性能** — 服务器渲染的 HTML 意味着内容在初始响应中（对爬虫和快速首屏绘制很好），不像只在客户端运行的 React SPA，它会发送一个空白页面然后水合。 - **单个项目中的全栈** — 前端和后端（API 路由、Server Actions）一起存在。 - **生产就绪的默认配置** — 自动代码分割、图像/字体优化、缓存。 ## 为什么这很重要 Next.js 是最受欢迎的 React 框架，因为它将 React 从 UI 库转变为完整的应用程序平台——处理渲染策略、路由、数据和后端，这样你可以专注于功能而不是基础设施。当你需要使用 React 实现 SEO、性能或服务器端逻辑时，它是默认选择。