Blog

一句话：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

官方资源

第三方 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 学习记录

延伸阅读