Next.js 框架入门
掌握 Next.js App Router、服务端组件和数据获取
- 理解 Next.js 解决什么问题
- 掌握 App Router 文件路由
- 理解服务端组件 vs 客户端组件
- 了解 Next.js 数据获取方式
为什么需要 Next.js？
纯 React 应用（SPA）有两个问题：首屏白屏时间长（要下载所有 JS 再渲染）SEO 不友好（搜索引擎看到空页面）。Next.js 解决这些问题：支持服务端渲染（SSR）、静态生成（SSG）、自动路由、API Routes。
朋友好学就是用 Next.js 16 App Router 构建的。你现在看到的页面，营销部分是 SSG 静态预渲染，课程页面也是 SSG，交互部分是客户端组件。
App Router 文件路由
Next.js App Router 中，文件夹就是路由，page.tsx 就是页面。
app/
├── page.tsx → / （首页）
├── about/page.tsx → /about
├── course/
│ └── [id]/page.tsx → /course/123 （动态路由）
├── lab/page.tsx → /lab
└── layout.tsx → 全局布局（导航栏等）服务端组件 vs 客户端组件
// 服务端组件（默认）：在服务器上渲染，发送 HTML 到浏览器
// 可以直接访问数据库、文件系统，不能用 useState/onClick
async function CoursePage({ params }) {
const course = await db.course.findUnique({ where: { id: params.id } });
return <div>{course.title}</div>;
}
// 客户端组件：在浏览器中运行，可以用 State/Effect/事件
"use client";
function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}服务端组件少发浏览器端的 JS，不用 React hydration，首屏更快。数据在服务端拿，不会有客户端瀑布请求。默认用服务端组件，要交互才加 "use client"。这是 Next.js 13+ 最核心的架构变化。
Next.js 数据获取
// 服务端组件中直接 async/await 获取数据
async function Page() {
const res = await fetch("https://api.example.com/data", {
next: { revalidate: 60 } // 60秒缓存重新验证
});
const data = await res.json();
return <div>{data.title}</div>;
}
// 客户端组件用 SWR/React Query
import useSWR from "swr";
function Profile() {
const { data, error } = useSWR("/api/user", fetcher);
if (error) return <div>加载失败</div>;
if (!data) return <div>加载中...</div>;
return <div>{data.name}</div>;
}Next.js App Router 中，哪个文件定义全局布局？
一个组件用到了 useState、onClick 等浏览器交互，文件顶部必须加什么？
资深工程师加餐
底层原理 · 大厂视角 · 工程经验，点卡片展开
网络侧：DNS→TCP/TLS→HTTP 请求与响应；浏览器侧：解析 HTML 建 DOM、解析 CSS 建 CSSOM、合并成渲染树，再经过布局（Layout）、绘制（Paint）、合成（Composite）上屏。前端性能优化几乎都围绕这条链路：减小资源体积、优化关键渲染路径、避免频繁触发重排重绘。
挑战任务
判断组件是否需要 "use client"
服务端组件不能用 useState/onClick/useEffect 这些浏览器能力。写 needs_client(lines) 这个函数：只要 lines 里任意一行包含这些关键字，就返回 True，否则返回 False。
课后作业
创建 Next.js 页面
用 Next.js App Router 创建 /about 页面，显示你的个人介绍。