什么是 Next.js？新手指南

为什么 Next.js 适合 SaaS：routing、SSR/SSG、API routes 同仓实现 — 一份完整且易读的入门指南。

什么是 Next.js（通俗版）

Next.js 是构建在 React 和 Node.js 之上的框架，用来更高效地开发现代 Web 应用（overview）。它在一个仓库里提供前端页面、后端接口以及 SSR/SSG 等渲染能力，所以很适合 SaaS：性能好、SEO 友好、API 同仓（why developers use Next.js）。

Next.js 开箱即用的能力

基于文件的路由

路由由文件结构自动生成（file-based routing）。
例：pages/about.js 变成 /about。

Server-Side Rendering (SSR)

每次请求都可在服务器渲染（SSR basics）。
首屏更快、SEO 更好，React 在客户端完成 hydration。

Static Site Generation (SSG)

构建时生成静态页面（SSG）。
适合营销页和更新不频繁的内容。

内置 API Routes

后端接口与前端同仓（API routes）。
许多项目起步阶段无需单独服务器。

自动代码分割与优化

每个页面只加载所需 JS/CSS（optimizations）。
内置压缩、tree‑shaking 与图片优化。

零配置的开发体验

TypeScript、CSS、Sass 原生支持。
你可以专注于功能而不是配置（DX overview）。

Next.js 的路由与布局

Next.js 自动把文件夹/文件映射成 URL。pages/user/settings/notifications.js 对应 /user/settings/notifications。动态路由同理：pages/posts/[id].js 对应 /posts/123。

它也支持可复用布局。App Router 允许在目录层定义布局，比如 app/dashboard/layout.js，则 /dashboard/* 下的页面都会使用该布局（nested layouts）。这对 SaaS 的营销页 + 登录后面板非常友好。

Server Components 与 Client Components（简单理解）

Next.js（尤其 13+）区分组件在哪运行：

Server Components

在服务器渲染，直接发送 HTML。
不会把 JS 发送到客户端（server vs client components）。
适合快速渲染和敏感数据展示。

Client Components

在浏览器运行，负责交互。
需要在文件顶部写 "use client"（client components）。
用于点击、表单、图表、动画等。

实际开发中通常混用：主结构用 Server Components，交互部分用 Client Components，兼顾速度与体验。

内置 API Routes：后端同仓

Next.js 允许把 API 放在 UI 旁边。pages/api/（Pages Router）或 app/api/（App Router）下的文件会变成 HTTP 端点。示例：

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ greeting: "Hello from Next API" });
}

访问 /api/hello 会在服务器执行并返回 JSON。部署在 Vercel 时，它会变成 serverless 函数。pages/api 里的代码不会被发送到浏览器（API routes are server-only），所以可以安全存放密钥并连接数据库。

快速验证：运行 pnpm dev，创建 api/health，打开 http://localhost:3000/api/health。看到 { "status": "ok" } 就证明前后端同仓运行。

这也是许多团队用 Next.js 起步的原因：UI 和 API 同步、无需 CORS、可共享类型。需要时再引入独立后端也没问题。

Tradeoffs：何时不一定需要 Next.js

Next.js 很强，但并非必需：

极简网站：单页静态站点用 HTML 或 Vite 更轻量。对超小项目来说可能“过度”（is it overkill?）。
已有后端：如果只需要纯客户端 UI，且不重视 SSR/SEO，轻量 React 足够。不过喜欢 Next.js 规约也完全可以用。
专门的后端：重计算、微服务或多前端共享 API 时，可以保留独立后端，把 Next.js 作为 UI（separate backend?）。

尽管如此，很多 SaaS 从 Next.js 起步并持续扩展。例如 sushi-templates.com 就使用 Next.js 覆盖前后端。框架让你先用一个仓库起步，再按需集成外部服务（why it’s a game-changer）。

结论与下一步

Next.js 兼顾易用与强大，把路由、渲染和后端 API 集成在一个代码库里，让你更专注于产品。

想上手的话：

使用 npx create-next-app@latest 或模板创建项目。
运行 pnpm dev。
添加 api/health，打开 http://localhost:3000/api/health。

之后你可以用文件路由建页面，用 Server Components 做快速数据渲染，用 Client Components 做交互。剩下的交给 Next.js。

参考链接

Contentful Blog – Next.js vs React: https://www.contentful.com/blog/next-js-vs-react/
Dev.to – Next.js overview and tradeoffs: https://dev.to/hamzakhan/why-nextjs-is-an-all-time-game-changer-for-web-development-a-technical-perspective-1bgf
Reddit r/nextjs discussion (features): https://www.reddit.com/r/nextjs/comments/v01uy1/why_should_i_use_next_other_than_ssr/
Stack Overflow – Next vs separate backend: https://stackoverflow.com/questions/78349307/ssr-and-api-layer-in-nextjs
LogRocket – Next.js layouts: https://blog.logrocket.com/guide-next-js-layouts-nested-layouts/
Dev.to – Server vs client components: https://dev.to/oskarinmix/server-components-vs-client-components-in-nextjs-differences-pros-and-cons-389f

什么是 Next.js？新手指南

On this page