目录

跟 Claude Code 或 ChatGPT 说“我想做个 Web 应用”，几乎一定会听到：“用 Next.js 吧。”对有经验的人来说这很自然，但新手会立刻冒出疑问：“Next.js 是什么？和 React 有什么不同？真的需要吗？”

先说结论：在新手的头一两个项目里，Next.js 是“方便”，不是“必需”。如果目标只是做出能跑的东西，更轻的选择（静态 HTML、Astro、Vite + React）往往就够了。与此同时，React 官方文档建议新应用从框架起步，并把 Next.js 放在第一位。本文用 React 与 Next.js 官方文档原文（截至2026年10月1日）核对这两面，整理出“用”与“不用”的分界线。

本文负责的是“AI 推荐 Next.js 时怎么判断”。Next.js 的原理（渲染方式、App Router、各版本变化）见 Next.js 是什么？，要不要部署到 Vercel 见 AI 推荐 Vercel 时。

AI RECOMMENDS · NEXT.JS

就算 AI 推荐，第一个项目也未必需要

——按想做的规模来判断的3个落脚点

SMALL · 个人网站、博客
Astro 等静态网站
只是罗列文章，不需要服务器处理。WordPress 或 Hugo 也够用。
MEDIUM · 待办应用、内部工具
Vite + React
登录后的界面用 SPA 就够了，也适合学习 React 基础。
LARGE · SaaS、电商、正式运营
Next.js 的主场
面向搜索的公开页面，加上登录后的界面和 API，一个项目里写完。

AI 往往先给出常见的“Next.js + Vercel + Tailwind”组合。
自己先对规模做一次判断，要学的东西就会大不相同。

1. AI 为什么推荐 Next.js——3个原因

AI 工具推荐 Next.js 是有根据的，归纳为3点。

AI 推荐 Next.js 的3个原因

1
官方推荐
React 官方建议新应用从框架起步，排第一的是 Next.js
对 AI 来说是“不易出错”的回答
2
“全都有”
路由、服务器端渲染、图片优化、API 都在一个包里
需要解释的库更少
3
上线路径短
把 GitHub 连到开发方 Vercel，push 一下就能发布
部署门槛最小化

原因①：官方文档推荐

React 官方页面“Creating a React App”写明：用 React 做新的应用或网站，建议从框架起步，并首先列出 Next.js（App Router）。公开的代码和教程里 Next.js 的例子也很多。因此对 AI 来说，推荐 Next.js 是“不易出错”的回答。但这并不是针对“是否最适合你的用途”做出的判断。

原因②：需要的功能“全都有”

只用 React（Vite + React 等）时，路由、服务器端渲染、图片优化、API都得分别用不同的库拼起来。Next.js 把它们放进一个框架里。AI 判断“要解释的东西更少”“代码更少”是合理的。

原因③：上线的步骤短

Next.js 由 Vercel 开发和维护，React 官方文档也写明了这一点。Vercel 通过 GitHub 集成，每次 push 都会一路发布上线，从写代码到上线的阻力很小。不过 Vercel 的免费套餐有条件，例如仅限非商业用途。详见 AI 推荐 Vercel 时。

2. Next.js 是什么——只讲判断所需

先理清术语。容易混淆的有3个：

  • JavaScript：在浏览器里运行的基础编程语言
  • React：Meta（原 Facebook）开发的 UI 库，用组件搭建界面的工具
  • Next.js：由 Vercel 开发、建立在 React 之上的“框架”，把路由、服务器端渲染、优化等“每做一个 Web 应用都需要的机制”打包在一起

用盖房子来比喻：JavaScript = 木材，React = 锤子和锯子，Next.js = 骨架（地基、柱子、屋顶框架）已经搭好的房屋套件。装修、摆好家具就能住，但必须遵守套件的规矩。

截至2026年10月1日，最新版本是 Next.js 16.3（2026年8月3日发布）。做判断时，比版本号更重要的是“更新的频率”。从2026年7月起，Next.js 改为每月提前预告并发布安全修复，2026年9月发布修复时，16.3 系列为“Active LTS”，15.5 系列为“Maintenance LTS”（Next.js 官方博客）。要用它，就得持续跟进这些更新。原理的详细说明（SSR、SSG、ISR、App Router、各版本变化）见 Next.js 是什么？。

3. 现在需要 Next.js 吗？分界线在哪里

先用5个问题缩小范围，判断你是否需要 Next.js。随后给出官方文档写到的适合与不适合，以及分界线表。

判断流程 × 5问

决定是否需要 Next.js 的5个问题

Q1. 要做什么？
静态博客、作品集 → Astro 等。Next.js 容易功能过剩。
Q2. 搜索流量重要吗？
重要 → 在服务器端或构建时生成 HTML 的方式。Next.js、Astro、SvelteKit 任选。只在浏览器里渲染的 SPA 不利。
Q3. 需要登录、数据库吗？
需要服务器处理 → Next.js（Route Handlers、Server Actions），或另设后端（Laravel、Express 等）。
Q4. 懂 React 基础吗？
还不懂 → 先用 Vite + React 或 HTML+JS 打基础。Next.js 会增加服务器与客户端之分等概念。
Q5. 放在哪里？
只能放静态文件的地方 → 静态导出（部分功能不可用）。能跑 Node.js 或 Docker 的地方则全部功能可用。

Q1～Q3 中有2个以上指向 Next.js，就适合用 Next.js。
几乎都不符合的话，可以考虑更轻的选择。

官方文档显示的适合与不适合（截至2026年10月1日）

Next.js 官方文档里没有“不适合的情况”清单。能作为判断材料的，是 React 官方的“如何起步”和 Next.js 官方的“放在哪里能用什么”。

出处原文写了什么对判断的意义
React“Creating a React App”建议新应用从框架起步，列出 Next.js（App Router）、React Router（v7）、Expo（原生应用）做 Web 应用时，Next.js 是官方推荐的候选之一，但不是唯一选择
同页“Start From Scratch”如果有现有框架难以满足的限制、想自己做框架，或者想学习 React 的基础，可以从零开始（路由和数据获取由自己选择）为了学习而用 Vite 等从纯 React 起步，也符合官方思路
Next.js“Deploying”Node.js 服务器和 Docker 支持全部功能，静态导出仅部分，各平台自己的集成“功能和兼容性可能不同”放置位置决定能用哪些功能。不用 Vercel 也能跑全部功能
Next.js“Static Exports”静态导出不支持 Cookie、rewrites/redirects/headers 设置、ISR（定期重新生成）以及依赖请求的 Route Handlers 等想放到只能托管静态文件的虚拟主机上，就得在设计时避开这些，或换别的方案
Next.js 官方博客从2026年7月起每月提前预告并发布安全更新。截至2026年9月，16.3 系列为 Active LTS，15.5 系列为 Maintenance LTS在服务器上运行的话，持续打补丁是前提

分界线表——选 Next.js 还是不选

把上面的原文和5个问题合起来，分界线大致如下（请把官方原文与本文的整理区分开来读）。

条件选 Next.js不选（替代候选）
做什么公开页面与登录后的界面、API 混在一起的 Web 应用只罗列文章的网站（Astro、Hugo、WordPress）
搜索流量有很多页面想出现在搜索结果里只有登录后的界面（Vite + React 的 SPA）
学习阶段已懂 React 基础（组件、props、state）React 本身是第一次接触（官方也给出从零学的路径）
放置位置能跑 Node.js 或 Docker，或 Vercel 等支持它的 PaaS只能放静态文件；需要服务器功能就换别的架构
运维能按月打安全补丁没有精力跟进更新（静态网站受影响较小）
已有资产新项目已在运行 Laravel、Rails、Django 等

4. 不用 Next.js 的起步方式——4个主要替代

明白“不一定要 Next.js”之后，按用途有4个现实的替代方案。

选项适合谁优点缺点
Astro博客、作品集、落地页页面以 HTML 输出，只在需要交互的地方加 JavaScript。可以混用 React、Vue、Svelte 组件不适合以登录为中心的动态应用
Vite + ReactSPA、内部工具、待办应用配置少，马上能跑。可以专注于 React 基础想被搜索到的页面需要另外准备服务器端机制
SvelteKit想要服务器端渲染，但不一定用 React写法接近 HTML，内置服务器端渲染React 学到的东西不能直接沿用
HTML + Vanilla JS真正的小网站零依赖，放上静态文件即可发布规模变大后难以管理

具体的选择指南：

  • 个人博客、文章网站 → Astro。AI Arte 本身基于 Laravel，但新开一个静态博客的话值得先试试 Astro
  • 待办应用、计算器、内部 SPA → Vite + React。也适合学习 React 基础
  • “不想用 React” → SvelteKit。模板写法接近 HTML
  • 只有一个落地页 → HTML + CSS。不需要框架

5. 如果要用——必须掌握的5个基础

决定“用 Next.js”之后，至少要掌握这5个基础。

基础①：App Router 与 Pages Router

Next.js 里新方式（App Router）和旧方式（Pages Router）并存。新项目用 App Router 起步（官方文档也以 App Router 为中心）。旧教程很多默认 Pages Router，要养成先确认“这是 App Router 用的吗？”的习惯。

基础②：Server Components 与 Client Components

这是 App Router 的核心概念。组件默认是 Server Component（在服务器端渲染）。需要点击等交互的部分，在文件开头写 'use client'，变成 Client Component。记住“取数据在 Server，界面操作在 Client”，就能避开起初的大部分困惑。

基础③：文件名就是路由

app/about/page.tsx → /about，app/blog/[slug]/page.tsx → /blog/任意字符串。文件夹结构直接就是 URL。和 React Router 等的思路不同，一开始会不习惯。

基础④：环境变量放哪里

API 密钥等写在 .env.local 里。只有可以交给浏览器的值才加 NEXT_PUBLIC_ 前缀，只在服务器用的值不加。弄错这一点把机密值暴露到浏览器，是新手常见的事故。

基础⑤：Vercel 以外的部署地点

按照 Next.js 官方“Deploying”页面，Node.js 服务器（next start）和 Docker 能跑全部功能，静态导出只支持部分。Cloudflare、Netlify 等使用各自的集成，官方说明“功能和兼容性可能不同”（Cloudflare 和 Netlify 正在开发官方的已验证适配器）。自己的服务器也能跑全部功能，但更新和监控就得自己承担。使用 Vercel 的条件写在 AI 推荐 Vercel 时。

6. 新手容易掉进的3个坑

坑①：“全都写成 use client”

每出一个错误就加一个 'use client'，在服务器端渲染的好处就几乎没了。那样的话 Vite + React 反而更直接。要记住“Client 尽量少，默认用 Server”。

坑②：事后才知道放置位置的条件

典型情形是：照 AI 说的用 Vercel 免费套餐起步，后来才发现“放了广告就算商业用途，免费套餐不能用了”。Vercel 的 Hobby 仅限非商业的个人使用，Pro 每月 $20 起，超出部分按量计费（截至2026年10月1日的 Vercel 官方文档）。反过来，也有人想放到只能托管静态文件的虚拟主机上，事后才发现重定向和 ISR 用不了。开工前先定好放在哪里，只用那里能跑的功能来设计。

坑③：AI 用旧的 Pages Router 写法

训练数据里有大量旧代码，所以 AI 有时会返回 Pages Router 风格的 getStaticProps 或使用 pages/ 目录的代码。只要明确说“用 App Router 写”，准确度就会提高。另见 提示词技巧。

补充：和 AI 一起写代码时，一开始就告诉它你用的 Next.js 版本是基本功。把 package.json 里 next 的值原样贴上，再加一行“App Router、TypeScript”，生成代码和项目对不上的情况就会减少。Next.js 16.3 还加入了让编程代理无需设置即可读取与项目版本相符文档的机制（Next.js 16.3）。

总结

本文要点如下。

  • AI 推荐 Next.js 的理由：官方推荐 / 全都有 / 上线路径短——都成立，但与“最适合你”是两回事
  • React 官方建议新应用从框架起步，同时也给出了为学习基础而从零开始的路径
  • 用“做什么”“搜索流量”“登录与数据库”“React 基础”“放置位置”这5个问题和分界线表来决定
  • Next.js 在 Node.js 服务器和 Docker 上能跑全部功能，静态导出只支持部分。Vercel 并非必需
  • 要用的话，按月打安全补丁是前提（2026年7月起）
  • 3大坑：全都 use client / 事后才知道放置位置的条件 / AI 用旧的 Pages Router 写

AI 说“用 Next.js 吧”的时候，在点头之前先停下来想想是否真的需要，是专业做法的第一步。Next.js 很强大，但第一个项目未必需要它。

常见问题

Q1. 学 Next.js 之前要先学 React 吗？

是的。Next.js 建立在 React 之上，组件、props、state 这些 React 基础概念必不可少。按照“React 官方学习页面 → 用 Vite 做个简单的 SPA → 再学 Next.js”的顺序，就不容易把 React 的内容和 Next.js 的内容混在一起。

Q2. Next.js 和 React Native 有关系吗？

名字相似，但是两回事。React Native 用来做手机应用（iOS/Android），Next.js 是做 Web 应用的框架。想做手机应用的话，可以看看 React 官方针对原生应用列出的 Expo。

Q3. 不用 Vercel 也能免费发布吗？

可以，但每家都有条件。Cloudflare Pages 的免费额度是每月最多500次构建（官方限制），Netlify 的 Free 每月300积分，达到上限就停止（2025年9月之后的新账户）。静态导出的话，任何能托管静态文件的地方都能发布。各家免费额度的条件整理在 PaaS（Vercel 等）是什么。

Q4. Server Components 和 Client Components，到底该写哪个？

默认用 Server，只有界面交互用 Client。用到 useState / useEffect / onClick 等的部分需要 'use client'。数据获取（fetch、数据库访问）放在 Server。拿不准时先按 Server 写，报错的部分再拆成 Client，这样比较好整理。

Q5. 和 AI 推荐 Docker 的那篇文章主题相似吗？

是同一系列。AI 当作“标配”推荐的工具（Docker、Next.js、TypeScript 等），是因为用的人多才推荐，并不一定最适合你。新手容易以为“AI 推荐 = 我也需要”，本文的主旨是按规模、目的、学习阶段先做一次自己的判断。