第14章 Next.js快速上手
React 全栈框架，服务端渲染入门
作者：zyyc-0336 | 日期：2026-06-12
🗺️ 学习路径建议
- 先学 14.1（Next.js 是什么），理解它和 React 的关系
- 再学 14.2-14.3（环境要求和创建项目），动手跑起来
- 最后学 14.4（目录结构和核心概念），建立整体认知
⚠️ 常见错误提示
• Next.js 的
•
• 默认组件是服务端组件，不能用
•
• Next.js 的
app/ 目录是 App Router（新），pages/ 是 Pages Router（旧），本文用 App Router•
"use client" 必须写在文件第一行，它让组件变成客户端组件• 默认组件是服务端组件，不能用
useState/useEffect 等 Hook•
next dev 启动的默认端口是 3000，不是 5173（Vite 的端口）
14.1 什么是 Next.js
Next.js 是基于 React 的全栈框架。React 只管 UI，Next.js 在此基础上提供了路由、服务端渲染、API 接口、部署优化等"全家桶"能力。
React vs Next.js
| 特性 | React（纯库） | Next.js（框架） |
|---|---|---|
| 路由 | 需要第三方库（react-router） | 内置文件式路由 |
| 渲染方式 | 纯客户端渲染（CSR） | 支持 SSR + SSG（更快、SEO 更好） |
| API 接口 | 需要单独搭后端 | 内置 API Routes |
| 优化 | 需要自己配 | 自动代码分割、图片优化 |
| 部署 | 需要配打包工具 | 一行命令部署到 Vercel |
Next.js 适合做什么？
- 个人博客（SEO 友好，加载快）
- 企业官网
- 电商网站
- 任何需要 SEO 的网站
💡 简单理解：React 是发动机，Next.js 是一整辆车。发动机再好，你还需要轮子、方向盘、座椅。
14.2 环境要求与创建项目
环境要求
| 工具 | 最低版本 | 检查命令 |
|---|---|---|
| Node.js | 18.17 以上 | node -v |
| npm | 9 以上 | npm -v |
创建项目
bash
# 创建 Next.js 项目（使用 App Router）
npx create-next-app@latest my-blog --typescript --tailwind --eslint --app --src-dir
# 参数说明：
# --typescript 使用 TypeScript（可选，推荐）
# --tailwind 使用 Tailwind CSS（可选）
# --eslint 使用 ESLint（推荐）
# --app 使用 App Router（必须选）
# --src-dir 使用 src 目录（可选，推荐）如果你不想用 TypeScript，可以去掉 --typescript：
bash
npx create-next-app@latest my-blog --js --tailwind --eslint --app --src-dir启动开发服务器
bash
# 进入项目
cd my-blog
# 安装依赖（create-next-app 已自动安装）
npm install
# 启动开发服务器
npm run dev打开浏览器访问 http://localhost:3000，看到 Next.js 欢迎页就说明成功了。
💡
npm run dev 启动的是开发服务器，修改代码后页面会自动热更新（Hot Reload），不用手动刷新。
14.3 开发命令
常用命令
| 命令 | 作用 |
|---|---|
npm run dev | 启动开发服务器（开发时用） |
npm run build | 构建生产版本（部署前用） |
npm start | 启动生产服务器（构建后用） |
npm run lint | 运行代码检查 |
| 命令 | 端口 | 用途 |
|---|---|---|
npm run dev | localhost:3000 | 开发调试 |
npm run build && npm start | localhost:3000 | 模拟生产环境 |
14.4 目录结构
Next.js 项目的默认目录结构（App Router）：
tree
my-blog/
├── public/ 静态资源（图片、字体等）
│ └── next.svg Next.js Logo
├── src/
│ └── app/ 应用目录（路由和页面在这里）
│ ├── layout.js 根布局（所有页面的公共外壳）
│ ├── page.js 首页（对应路由 /）
│ ├── globals.css 全局样式
│ └── favicon.ico 网站图标
├── next.config.js Next.js 配置文件
├── package.json 项目配置
├── tailwind.config.js Tailwind 配置
└── tsconfig.json TypeScript 配置核心文件说明
| 文件 | 作用 | 必须？ |
|---|---|---|
app/page.js | 对应路由 /（首页） | ✅ |
app/layout.js | 根布局，包裹所有页面 | ✅ |
app/globals.css | 全局样式 | 是 |
public/ | 静态资源目录 | 是 |
📝 创建第一个页面示例
jsx
// src/app/page.js —— 首页
export default function Home() {
return (
<main style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
minHeight: '100vh',
fontFamily: 'sans-serif'
}}>
<h1>欢迎来到我的博客</h1>
<p>用 Next.js 搭建的个人博客系统</p>
<div style={{ marginTop: '20px' }}>
<a href="/posts" style={{
padding: '10px 20px',
backgroundColor: '#3498db',
color: 'white',
textDecoration: 'none',
borderRadius: '6px'
}}>
查看文章 →
</a>
</div>
</main>
);
}保存后，浏览器会自动刷新显示新页面。
App Router 核心概念
| 概念 | 说明 | 文件 |
|---|---|---|
| 页面 | 每个 page.js 对应一个路由 | app/about/page.js → /about |
| 布局 | layout.js 包裹页面，共享 UI | app/layout.js 根布局 |
| 组件 | 普通 React 组件 | 任何 .js 文件 |
| 静态资源 | 放在 public/ 里的图片等 | /public/logo.png → /logo.png |
⚠️ 新手易错：
⚠️ 新手易错：
app/ 目录下的文件名有特殊含义。page.js 是页面，layout.js 是布局，loading.js 是加载状态，not-found.js 是 404 页面。不要随便乱命名。⚠️ 新手易错：
app/page.js 的组件名可以随便起（通常叫 Home），但必须默认导出：export default function Home() {}。
本章复盘——Next.js 快速上手核心要点
| 要点 | 说明 |
|---|---|
| Next.js 是什么 | 基于 React 的全栈框架，内置路由、SSR/SSG、API |
| 创建项目 | npx create-next-app@latest 带 --app 参数 |
| 开发命令 | npm run dev 启动开发服务器（端口 3000） |
| 目录结构 | src/app/page.js 是首页，layout.js 是布局 |
| 页面 | 每个 page.js 对应一个路由 |
| 导航 | 用 next/link 的 <Link> 组件，不用 <a> |
下一章预告（第15章）：我们将学习文件式路由与布局——App Router 目录结构、layout.js 和动态路由。
本文档由 zyyc-0336 编写，最后更新：2026-06-14