什么是 Next.js？面向应用构建者的通俗指南

Next.js 是一个用 React 构建网站和 Web 应用的框架。React 提供界面的基础构件，例如按钮、表单和列表。Next.js 则在它们之外补充了网站的其余部分：页面和网址、在服务器上渲染页面以便它们到达时就已可读、加载数据，以及在同一项目中运行后端代码。它是开源的，由 Vercel 公司开发，是构建 React 网站最广泛使用的方式之一。

用 AI 构建时为什么 Next.js 很重要

当你向 AI 构建器描述一个应用时，它必须选择一个技术基础。这个选择会影响你之后关心的许多方面：

• 搜索可见度。 需要在谷歌中获得排名的公开网站，受益于发送真实的 HTML，而 Next.js 在这方面做得很好。
• 后端放在哪里。 Next.js 让前端页面和服务器代码（例如“保存这份表单”或“调用支付 API”）可以放在同一个项目中。
• 托管。 带有服务端功能的 Next.js 应用需要一台服务器来运行，而普通的 Vite 应用则可以作为静态文件提供服务。

Mythex 默认为新项目使用 Vite + React + TypeScript + Tailwind，当你要求时才会使用 Next.js——在你的第一条提示词中写上“使用 Next.js”就足够了（技术如何选择）。因此，了解什么时候值得提出这一要求会很有帮助。

一个日常类比

如果把 React 比作一盒高质量的乐高积木，那么 Next.js 就像一套乐高套装，附带了说明书、底板，以及门和管道的零件。

你可以用散装积木搭出同样的房子，只是得自己决定各个房间如何连接、前门在哪里，以及水管怎么接。Next.js 则以一种标准的方式替你做了这些决定，因此每个 Next.js 项目的结构都大致相同，新来的开发者（或 AI）能很快找到方向。

Next.js 为 React 增加了什么

Next.js 有两种组织页面的方式。App Router（app/ 文件夹）是较新的方式，支持服务器组件。Pages Router（pages/ 文件夹）是最初的方式，目前仍受支持。新项目通常使用 App Router。如果 AI 构建器生成的代码或某个教程看起来很陌生，这往往就是原因。

实例：一个本地咖啡馆的公开目录

设想一个列出你所在城市咖啡馆的网站，每家咖啡馆一个页面，并希望它能出现在搜索结果中。

其中一家咖啡馆的 Next.js 页面大致如下：

// app/cafes/[slug]/page.tsx  →  /cafes/blue-door, /cafes/hilltop ...
export default async function CafePage({ params }) {
  const { slug } = await params;
  const cafe = await db.cafe.findUnique({ where: { slug } });
  return (
    <main>
      <h1>{cafe.name}</h1>
      <p>{cafe.address}</p>
    </main>
  );
}

当有人（或谷歌）访问 /cafes/blue-door 时会发生以下过程：

1. Next.js 将网址与该文件匹配。[slug] 文件夹表示“任意一家咖啡馆”。
2. 该组件在服务器上运行，从数据库中读取咖啡馆信息并构建 HTML。
3. 浏览器收到一个完整的页面，其中已经包含咖啡馆的名称和地址——无需等待 JavaScript 再去获取数据。

如果是普通的客户端 React 应用，浏览器会先收到一个几乎为空的页面，再下载 JavaScript，然后获取咖啡馆信息，最后才显示出来。搜索引擎通常也能处理这种情况，但完整的页面会更可靠。参见面向 AI 构建网站的 SEO。

与之相比，一个需要登录才能访问的员工仪表盘，搜索引擎本来就看不到，因此服务端渲染带来的好处较小，一个更简单的 Vite 应用往往更合适。

关键术语

常见误解

• “Next.js 取代了 React。” 并非如此。它使用 React。你的组件仍然是 React 组件。
• “Next.js 总是更好的选择。” 它功能更强大，但也需要理解更多内容。服务端渲染、缓存，以及服务器代码与客户端代码之间的区别，都是令人困惑的错误的常见来源。对于大部分在登录之后使用的应用，普通的 React 应用通常更简单。
• “Next.js 只能在 Vercel 上运行。” 它是开源的，可以运行在任何 Node.js 服务器或 Docker 容器中。如果不使用服务器功能，还可以进行完整的静态导出。
• “使用 Next.js 就能保证良好的 SEO。” 它让可读的页面更容易被索引。排名仍然取决于标题、内容、速度和链接。
• “Next.js 中的服务器代码自动是私有的。” 标记为供客户端使用的代码最终会进入浏览器。密钥必须保留在仅限服务器端的代码和环境变量中。

向 AI 构建器提出的请求

• “使用带 App Router 的 Next.js”——如果你需要它，就写在第一条提示词里。
• “哪些页面在服务器上渲染，哪些是静态的，哪些在浏览器中运行？为什么？”
• “让公开的营销页面和列表页面采用服务端渲染或静态方式，并配有恰当的标题和描述。”
• “把 API 密钥保存在仅限服务器端的代码和环境变量中。请告诉我每个密钥是在哪里被读取的。”
• “这个应用需要 Next.js 吗？还是对于我们要做的事情，Vite + React 应用会更简单？”

Mythex 中的 Next.js

Mythex 默认使用 Vite + React + TypeScript + Tailwind，当你在提示词中要求时会切换为 Next.js；尽早说明会比之后再改更省积分。你可以在实时预览中看到应用，而“发布”会把它部署到一个在线网址，无需你自行设置托管。Mythex 的文档指出，客户端渲染的单页应用，其 SEO 效果弱于服务端渲染或静态的 HTML，因此如果搜索很重要（例如营销网站），最好在一开始就说明（应用的 SEO）。

常见问题