📌 项目地址：vercel/next.js | ⭐ 140,615
颗星 | 🔧 JavaScript | 📜 未标注
它解决的核心问题
React
本身只管视图层。路由、数据获取、客户端渲染还是服务端渲染、图片优化，这些都得你自己搭。最烦的是
Webpack 配置——项目刚开个头就卡在配置上。Next.js
把这些全包了，零配置就能跑一个带 SSG、SSR 或 ISR 的 React 项目。它的
README 封面写得很清楚：“The React Framework for Production”。
我试过的核心功能
创建项目
npx create-next-app@latest 确实快。选完 TypeScript 或
JavaScript，几分钟就能跑起来。目录结构默认是 App Router（13
版本引入），也可以用 --use-pages-router 回到老版 Pages
Router。
Pages Router vs App Router
Pages Router 用文件系统映射路由，pages/index.js 就是
/，pages/about.js 是 /about。API
路由也是文件系统：pages/api/hello.js 处理
/api/hello 的 GET
请求。我早期用这个写了一个小商城，很直观。
App Router 改得更复杂了：路由基于文件夹，每个文件夹下可以有
page.js、layout.js、loading.js、error.js。它默认导入了
React Server Components，客户端组件需要加
'use client'。好处是可以按布局嵌套，减少重复渲染。但上手门槛高了，项目用的人不多的话，我建议先选
Pages Router。
数据获取方式
三种主流模式 README 里都有文档：
getServerSideProps：每次请求执行，适合需要实时数据的页面（比如用户信息）。getStaticProps：构建时执行一次，生成
HTML，适合博客、文档。getStaticPaths：配合动态路由[slug].js
预渲染所有路径。
我是做电商的，ISR（增量静态再生）最实用。设置
revalidate: 60 后，页面 60
秒后下次请求会重新生成，价格更新不用重新部署。但要注意：ISR
在自托管时需要自己处理缓存，Vercel 默认支持，自建服务器要配好
next.config.js 的 output: 'standalone'。
和同类框架的真实差别
Gatsby 是纯 SSG。你用 Gatsby
生成一个产品页面，价格改了必须重新构建并部署。Next.js 的 ISR
能局部刷新，适合内容变动不频繁但需要及时生效的场景。
Remix 更强调 Web 原生
API（Fetch、FormData），路由设计成嵌套的
route.tsx，数据加载用 loader 和
action。它在 SSR
下表现不错，但静态生成支持较晚。如果你项目需要大量 SSG，Next.js
更成熟。
Create React App (CRA) 纯 CSR，首屏需要下载整个 JS
包，SEO 基本为零。Next.js 默认生成 HTML，首屏快很多。
我踩过的坑
Vercel 锁定问题
Next.js 是 MIT 开源，但许多文档里的例子默认部署到 Vercel。ISR 的
On-Demand Revalidation（用
res.revalidate()）在自托管时需要额外配置 SQLite 或 Redis
存储。Edge Functions 也只在 Vercel Edge 上运行，自托管的 Node.js
环境不支持。
文件路由在大型项目里的麻烦
Pages Router 下，所有页面挤在 pages/
目录，几十个文件就乱了。App Router 用文件夹分割，但
layout.js 和 template.js
的区别得花时间理解。我建议小项目用 Pages，大项目再考虑 App。
中间件版本限制
中间件（Middleware）要求 Node.js >= 16.x，且部署环境必须支持
Serverless。本地调试没问题，到一些传统的物理机服务器上可能跑不了。
什么项目别用 Next.js
- 后台管理系统。不需要 SEO，纯 CSR 直接 Vite + React
Router 更快，打包体积也小。 - 纯静态博客。Hugo 或 Zola
千分之一的大小，编译速度快得多。 - 只有几个页面的落地页。Next.js
的打包仍然包含整个框架代码，用原生 HTML + CSS 或者 Astro 更轻。
一句话总结
Next.js 适合对首屏性能有要求、需要 SEO、或者想快速出活的 React
项目。但别被 140k star 骗了——它有很多跟 Vercel
绑定的功能，自托管时请先看文档里关于 next.config.js 的
output 选项。