AI 说"用 Next.js"——初学者上手前真正该知道的事

向 Claude Code 或 ChatGPT 询问"我想做一个 Web 应用"，几乎一定会听到"用 Next.js 吧"。对有经验的开发者来说这是自然的建议，但对初学者却会立刻冒出一连串疑问："Next.js 是什么？和 React 有什么区别？我真的需要它吗？"

先把诚实的答案说在前面：对初学者的头一两个项目而言，Next.js 是"方便"，而不是"必需"。如果目标是"做出能跑的东西"，更轻量的选择（纯 HTML、Astro、Vite + React）往往就够了。但 AI 推荐 Next.js 的理由并没有错——本文将拆解它为何会推荐、Next.js 到底是什么、该选与不该选的场景、可选的替代方案、必须掌握的最小知识，以及每个初学者都会踩到的陷阱。所有内容基于 2026 年 5 月的事实。

先说我个人的看法：归根结底取决于"项目规模 × 可用学习时间"。个人博客 → Astro 或 WordPress。Todo 应用 → Vite + React。SaaS 或真正的电商 → Next.js——这就是 2026 年的现实。AI 之所以一律推荐 Next.js，是因为它在训练数据中最常见，并不是因为它最适合你的项目。

1. AI 为什么推荐 Next.js——三个理由

AI 工具指向 Next.js 的理由都是真实的。共有三点：

理由①：在训练数据中占主导

2026 年的 AI 模型基于包含公开 GitHub 仓库和 Stack Overflow 的巨大文本数据集进行训练。全球范围内的"基于 React 的框架"压倒性地指向 Next.js。对 AI 而言，推荐 Next.js 是最不容易出错的答案。这是基于出现频率的判断，而不是基于质量的判断。

理由②：你需要的功能全都打包好了

仅使用 React（CRA 或 Vite + React）本身，需要你从不同的库中自己拼装路由、SSR、图片优化、API 路由、SEO。Next.js 把这一切都装进了一个包。从 AI 的角度看，"未知更少、代码更少"使 Next.js 成为合理的建议。

理由③：Vercel 让部署轻松到令人发指

Vercel——Next.js 背后的公司——运营着 Vercel Platform，连接 GitHub 后就能在免费层一键发布应用。从"写完代码"到"被世界看到"之间的摩擦，比其他任何方案都低。对于想做到"能跑、能给人看"的初学者，AI 的推荐是合理的。

2. Next.js 是什么？——面向初学者的讲解

有三个术语需要清楚区分：

• JavaScript：在浏览器中运行的基础编程语言
• React：由 Meta（前 Facebook）打造的 UI 库。一个用组件搭建界面的工具集
• Next.js：由 Vercel 打造、位于 React 之上的"框架"。它把每次做 Web 应用都会用到的东西（路由、SSR、优化等）打包起来

用盖房子来类比：JavaScript = 木材，React = 锤子和锯子，Next.js = 已经搭好地基、立柱和屋顶框架的房屋套件。你只需要做内饰、把家具搬进去。

截至 2026 年 5 月，当前主要版本是 Next.js 16。App Router（新的路由方案）、React Server Components（在服务器渲染的组件）和 Turbopack（高速构建工具）现已成为标准。但这些新概念也同时使初学者的学习曲线变得更陡。

3. 你真的需要 Next.js 吗？——判断流程

一个五分钟就能搞清楚"我该不该选 Next.js？"的流程。

4. 不用 Next.js 起步——四个靠谱的替代方案

如果"Next.js 是杀鸡用牛刀"成立，下面是按使用场景排列的四个现实可行的替代方案。

具体的选择启发法：

• 个人博客 / 内容站 → Astro。（AI Arte 本身基于 Laravel，但对于一个新博客项目，Astro 值得先试。）
• Todo 应用 / 计算器 / 内部 SPA → Vite + React。学习时间约为 Next.js 的 1/3
• "不想用 React" → SvelteKit。模板语法接近 HTML，对初学者更友好
• 单页落地页 → HTML + 通过 CDN 引入 Tailwind。不需要框架

5. 如果你要用——必须掌握的五项基础

如果你已经决定"就用 Next.js"，下面是不能跳过的五项基础。

基础①：App Router 与 Pages Router

两者并存：Next.js 13 起的新风格（App Router）与旧风格（Pages Router）。App Router 是 2026 年的默认；新项目从这里开始。许多旧教程默认用 Pages Router，所以养成问一句"这是给 App Router 的吗？"的习惯。

基础②：Server Components 与 Client Components

App Router 引入的最大新概念。默认情况下，组件是 Server Component（在服务器渲染，零 JS 发往客户端）。如果需要交互性（onClick 等），在顶部加上 'use client'，把它变成 Client Component。把"取数据 = Server，UI 交互 = Client"这条原则内化，80% 的困惑就消失了。

基础③：文件名就是路由

app/about/page.tsx → /about；app/blog/[slug]/page.tsx → /blog/anything。文件夹树就是 URL。这与 React Router 的理念不同，前期难免会困惑。

基础④：环境变量放在哪里

API 密钥放在 .env.local。可以暴露给客户端的变量必须以 NEXT_PUBLIC_ 为前缀；只在服务器使用的变量没有前缀。把两者搞混并泄露私钥是初学者的经典事故。

基础⑤：Vercel 之外的部署目标

Next.js 可以部署到任何地方，但会有功能限制：Cloudflare Pages（Next-on-Pages）、Netlify（官方适配器）、自托管 Docker。脱离 Vercel 意味着你要接受某些 Image Optimization 和 ISR 功能可能不会按宣传那样工作。

6. 初学者的三大陷阱

陷阱①：到处都加上 'use client'

每次遇到错误就加 'use client'，你会把整个服务器渲染的优势全部丢掉。到那时 Next.js 几乎没有任何好处（用 Vite + React 反而更简单）。请牢记"Client 越少越好，Server 越多越好"。

陷阱②：忽略 Vercel 锁定

Vercel 的免费层很有吸引力，但商业使用会让你升到"Pro 每用户每月 20 美元"，真正规模的生产环境则要到"Enterprise"。Image Optimization 按用量计费，Edge Functions 按调用次数计费——你可能某天醒来发现月账单达到三位数高位。从第一天起就要按"这套东西可能在别处跑"的思路来设计。

陷阱③：AI 返回过时的 Pages Router 代码

由于 2024 年以前的代码在训练数据中占比很大，AI 经常返回使用 getStaticProps 和 pages/ 目录的 Pages Router 风格代码。只要在提示中明确说明"使用 App Router"或"Next.js 15+ 的写法"，准确率就会大幅提升。参见提示词技巧。

总结

回顾：

• AI 为什么推荐 Next.js：训练数据占主导 / 全家桶 / Vercel 部署轻松——理由都站得住脚，但默认都不等于"对你而言最优"
• Next.js 是位于 React 之上的框架。2026 年 5 月：Next.js 16 / App Router / Server Components / Turbopack 为默认
• 判断流程：做什么 / SEO / 数据库 / 时间预算 / 目标主机——5 个问题，5 分钟
• 四个替代方案：Astro（博客） / Vite + React（SPA） / SvelteKit（轻量） / HTML + 原生（极简）
• 必知五项基础：App Router、Server vs Client、基于文件的路由、环境变量、部署选项
• 三个陷阱：到处用 use client / Vercel 锁定 / AI 返回过时的 Pages Router 代码

当 AI 说"用 Next.js"时，专业人士的第一步是先停一下，再决定是否接受。即便是初学者，仅仅明白"AI 推荐它是因为它在训练数据中频率高"，就能省下实打实的学习成本。Next.js 是一件强大的工具，但它未必适合你的第一个项目——这就是 2026 年的冷静现实。

FAQ