1. Next.js 简介与安装

本节目标：搞清楚 Next.js 是什么、能干什么，然后动手装好环境、跑出第一个项目。

Next.js 是什么

Next.js 是一个基于 React 的开源框架，由 Vercel 公司开发和维护。

React 本身是个 UI 库，只负责”画界面”。路由、数据获取、服务端渲染这些事，React 不管。Next.js 就是来补这些空缺的——它给 React 加上了路由、服务端渲染、静态生成、API 路由等能力，让你能直接构建生产级应用。

简单说：React 是砖块，Next.js 是盖好的房子框架。

Next.js 解决了什么问题

用纯 React 写应用，你会遇到这些麻烦：

路由要自己装：得额外引入 react-router-dom
SEO 不友好：默认是客户端渲染，搜索引擎抓不到内容
首屏加载慢：得等 JS 下载执行完，页面才显示
配置繁琐：Webpack、Babel、TypeScript 都要自己配

Next.js 把这些全内置了。你只管写业务代码，不用折腾工具链。

和其他框架对比

框架	定位	学习曲线	适合场景
Next.js	React 全栈框架	中	需要 SSR/SSG 的 React 应用
Remix	React 全栈框架	中	注重 Web 标准的应用
Nuxt	Vue 全栈框架	中	Vue 生态的全栈应用
SvelteKit	Svelte 全栈框架	低	追求极致性能的小应用
Astro	内容优先框架	低	博客、文档、营销页面

Next.js 的优势在于生态最大、文档最全、部署最方便（尤其配合 Vercel）。

环境要求

动手之前，确认你的机器满足：

Node.js 20.9 或更高版本
操作系统：macOS、Windows（含 WSL）、Linux 都行

检查 Node 版本：

node -v

如果版本太低，去 nodejs.org 下载最新版。

用 create-next-app 创建项目

create-next-app 是 Next.js 官方提供的脚手架工具，一条命令搞定项目初始化。

npx create-next-app@latest my-app --yes

--yes 表示使用默认配置，跳过交互式问答。默认会启用：

TypeScript
ESLint
Tailwind CSS
App Router
Turbopack（新一代打包器）
路径别名 @/*

Tip

如果你用 pnpm、yarn 或 bun，可以替换前缀：
pnpm create next-app@latest my-app --yes
yarn create next-app@latest my-app --yes
bun create next-app@latest my-app --yes

手动配置（可选）

想自定义技术栈，去掉 --yes 参数：

npx create-next-app@latest

终端会依次询问你：

项目名称
是否使用 TypeScript
选择 linter（ESLint / Biome / 无）
是否使用 React Compiler
是否使用 Tailwind CSS
是否把代码放在 src/ 目录
是否使用 App Router（推荐）
是否自定义路径别名
是否生成 AGENTS.md（给 AI 编码助手用）

手动安装

如果你想在已有项目里加 Next.js，手动装包：

npm install next@latest react@latest react-dom@latest

然后在 package.json 加上脚本：

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint",
    "lint:fix": "eslint --fix"
  }
}

这些脚本对应开发的不同阶段：

next dev：启动开发服务器（默认用 Turbopack）
next build：构建生产版本
next start：启动生产服务器
eslint：代码检查

创建 App 目录

Next.js 用文件系统路由——文件夹结构就是 URL 路径。

新建 app 目录，里面放两个必须的文件。

app/layout.tsx 是根布局，所有页面共用：

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

app/page.tsx 是首页：

export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

启动开发服务器

cd my-app
npm run dev

打开浏览器访问 http://localhost:3000，你会看到 “Hello, Next.js!”。

改一下 app/page.tsx 的内容，保存后浏览器自动刷新——这就是热更新。

支持的主流浏览器

Next.js 默认支持这些浏览器，无需额外配置：

Chrome 111+
Edge 111+
Firefox 111+
Safari 16.4+

小结

这一章我们搞定了三件事：

理解了 Next.js 的定位——React 的全栈框架
检查了环境要求（Node.js 20.9+）
用 create-next-app 创建了第一个项目并跑了起来

下一章，我们来拆解项目的目录结构，看看每个文件都是干什么的。