Next.js 教程第一章：认识 Next.js 与 App Router
Next.js 教程第一章：认识 Next.js 与 App Router
如果你已经学过 React，Next.js 就是你进入真实项目开发的下一步。
React 主要负责构建 UI，而 Next.js 在 React 的基础上补上了路由、渲染、数据获取、SEO、图片优化、字体优化、API 接口、部署等能力。简单说，Next.js 不只是一个前端框架，它更像是一个面向生产环境的网站和应用开发框架。
本系列会以官方推荐的 App Router 为主线，从项目创建、路由、布局、服务端组件、数据获取、缓存、SEO、接口开发，到部署上线，逐章拆开讲。
这一章你会学到什么
- Next.js 是什么
- App Router 是什么
- 如何创建第一个 Next.js 项目
app、page.tsx、layout.tsx分别有什么用- 为什么 Next.js 适合现代网站和全栈应用
Next.js 是什么
Next.js 是一个基于 React 的全栈 Web 框架。
它可以用来开发：
- 企业官网
- 文档站
- 电商网站
- SaaS 后台
- 内容管理系统
- 数据看板
- 带 API 的全栈应用
和普通 React 项目相比，Next.js 最大的优势是：它帮你把很多项目必备能力变成了框架内置能力。
比如你不用自己从零配置路由，不用额外处理页面 SEO，不用手动优化图片，也不用单独搭一个简单 API 服务。Next.js 已经把这些能力放进了框架里。
App Router 是什么
现在学习 Next.js，建议直接从 App Router 开始。
App Router 是 Next.js 官方推荐的路由系统。它基于文件夹结构来定义页面路径，并且天然支持 React Server Components、布局嵌套、加载状态、错误处理、数据获取和流式渲染。
最简单的理解是：
| 文件路径 | 对应访问路径 |
|---|---|
app/page.tsx | / |
app/products/page.tsx | /products |
app/products/[id]/page.tsx | /products/123 |
在 App Router 里，文件夹决定 URL 路径，特殊文件决定这个路径具体做什么。
常见特殊文件有：
| 文件名 | 作用 |
|---|---|
page.tsx | 页面内容 |
layout.tsx | 共享布局 |
loading.tsx | 加载状态 |
error.tsx | 错误边界 |
not-found.tsx | 404 页面 |
route.ts | API 接口 |
这套设计非常适合中大型项目。因为首页、列表页、详情页、设置页、专题页，本质上都可以用目录结构清晰地表达出来。
创建第一个 Next.js 项目
你可以使用官方脚手架快速创建项目：
pnpm create next-app@latest my-next-app --yes
进入项目目录：
cd my-next-app
启动开发服务器：
pnpm dev
然后在浏览器打开 http://localhost:3000。
如果页面能正常打开，说明你的第一个 Next.js 项目已经跑起来了。
--yes 表示使用推荐默认配置。通常会包含 TypeScript、ESLint、Tailwind CSS、App Router、Turbopack 和默认路径别名 @/*。
如果你不用 pnpm，也可以换成 npm：
npx create-next-app@latest my-next-app --yes
cd my-next-app
npm run dev
认识项目结构
一个新建的 Next.js 项目大概会有这些文件和目录：
| 文件或目录 | 说明 |
|---|---|
app/ | App Router 的核心目录，页面、布局和接口主要放在这里 |
app/layout.tsx | 根布局，所有页面都会经过它 |
app/page.tsx | 首页内容，对应 / |
public/ | 静态资源目录，比如图片、图标、字体文件 |
package.json | 项目依赖和脚本 |
next.config.ts | Next.js 配置文件 |
tsconfig.json | TypeScript 配置文件 |
eslint.config.mjs | ESLint 配置文件 |
其中最重要的是 app 目录。
app/page.tsx 是首页内容：
export default function Page() {
return <h1>Hello Next.js!</h1>
}
它对应的访问路径是 /。
app/layout.tsx 是根布局：
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="zh-CN">
<body>{children}</body>
</html>
)
}
所有页面都会被这个布局包住。你可以把全局导航、字体、主题、统计脚本等放在这里。
page 和 layout 的区别
page.tsx 表示某个路由真正展示的页面。
layout.tsx 表示多个页面共享的外壳。
比如一个产品模块可能有这些文件：
| 文件路径 | 作用 |
|---|---|
app/products/layout.tsx | 产品模块共享布局 |
app/products/page.tsx | 产品列表页 |
app/products/[id]/page.tsx | 产品详情页 |
app/products/layout.tsx 可以放产品模块的导航、筛选入口、侧边栏或统一页面结构。这样 /products 和 /products/123 都能共享同一套模块布局。
这就是 App Router 很适合组织复杂页面结构的原因之一。
Server Component 和 Client Component
在 App Router 中，页面和布局默认是 Server Component。
Server Component 会在服务器执行，适合做这些事情：
- 读取数据库
- 请求后端接口
- 处理不想暴露给浏览器的密钥
- 减少发送到浏览器的 JavaScript
- 提升首屏加载体验
如果你需要点击事件、状态、浏览器 API，比如 useState、useEffect、window、localStorage，就需要使用 Client Component。
Client Component 需要在文件顶部加上：
'use client'
例如：
'use client'
import { useState } from 'react'
export default function Counter() {
const [count, setCount] = useState(0)
return (
<button onClick={() => setCount(count + 1)}>
点击次数：{count}
</button>
)
}
一个实用原则是：能放在服务器做的事情，优先放在服务器做；只有真正需要交互的组件，才加 'use client'。
Next.js 适合哪些项目
Next.js 适合那些既需要页面体验，又需要工程能力的网站和应用。
常见项目通常会关心这些问题：
- 页面打开速度
- 搜索引擎收录
- 页面 SEO
- 图片优化
- 清晰的路由结构
- 后期扩展接口、后台、专题页或文档
Next.js 对这些场景非常友好。
比如它内置 Metadata API，可以为页面生成标题、描述、Open Graph 信息。内容详情页、产品详情页、教程页面，也都可以根据 URL 参数动态生成 SEO 信息。
一个简单的 metadata 示例：
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'Next.js 教程',
description: '从零开始学习 Next.js App Router',
}
后面章节我们会专门讲 Next.js 的 SEO、动态 metadata、站点地图和详情页优化。
本章练习
你可以试着完成下面几个小任务：
- 创建一个新的 Next.js 项目。
- 修改
app/page.tsx，让首页显示自己的名字。 - 新建
app/about/page.tsx，访问/about看看页面是否生效。 - 修改
app/layout.tsx，给所有页面加一个简单标题。
练习的重点不是写复杂代码，而是先理解 App Router 的文件系统路由规则。
本章小结
这一章我们先建立了 Next.js 的整体认识。
你需要记住几个关键词：
- Next.js 是基于 React 的全栈 Web 框架
- App Router 是现在推荐学习的路由系统
app目录负责定义页面和路由page.tsx负责页面内容layout.tsx负责共享布局- 默认组件是 Server Component
- 需要交互时才使用 Client Component
下一章我们会正式拆解 App Router 的路由规则，学习普通路由、嵌套路由、动态路由，以及如何用它设计一个详情页。
后续章节建议
- 第二章：App Router 路由系统
- 第三章：布局、导航和嵌套路由
- 第四章：Server Component 与 Client Component
- 第五章：数据获取与服务端渲染
- 第六章：缓存、重新验证和性能优化
- 第七章：Metadata、SEO 和站点地图
- 第八章：Route Handler 与接口开发
- 第九章：实战项目结构设计
- 第十章：部署到 Vercel
参考资料
标签
评论