Next.js 14 学习路线与资源

一句话：Next.js = React 元框架，2024 起默认 App Router + Server Components。

写在前面

若已熟悉本博客 Nuxt 3，可这样对照：

概念	Nuxt 3	Next.js
路由	pages/ 或 app/	app/（App Router）
数据获取	useAsyncData	async Server Component / fetch
API	Nitro server/api	Route Handlers route.ts
布局	layouts/	layout.tsx

官方资源

• Next.js 文档（英文）
• Learn Next.js 交互教程

第三方 nextjs.cn 可能滞后，以英文官网为准。

建议学习顺序

1. Create：npx create-next-app@latest 选 App Router + TypeScript
2. 路由：app/page.tsx、app/blog/[slug]/page.tsx
3. 数据：Server Component 直接 await fetch；Client 用 'use client' + SWR
4. API：app/api/hello/route.ts 导出 GET/POST
5. 部署：Vercel 一键；自托管 next build && next start

练手项目

• 个人博客列表 + MDX 详情（对照 Nuxt content）
• Todo CRUD + Route Handler + SQLite/Prisma

小结

• Next 与 Nuxt 解决同类问题，换栈时优先理解 RSC vs CSR 边界
• React 基础可先读 react 学习记录

---

延伸阅读

• React 官方 Learn