这个系列的目标

17 篇读完，你能：

  • 用 Next.js 起一个完整的个人网站
  • 写 React 组件 + 路由 + 数据获取
  • 用 Tailwind 把页面调得好看
  • 加 Markdown 博客（MDX）
  • 部署到 Vercel 或自家 VPS（CentOS + Nginx）
  • 每页带 SEO（title / OG / 结构化数据）

不教深入：那是 react-advanced/ 25 篇的事。

为什么是 Next.js 而不是纯 React

纯 React（Vite） Next.js
路由 自己装 React Router 内置基于文件
SSR / SSG 没有 内置
SEO 差（SPA） 好
图片优化 自己处理 内置 next/image
API 后端 没有 内置 Route Handler / Server Actions
部署 Vercel / 任何静态托管 Vercel / 自托管都行
适合 纯 SPA 应用 内容站 / 个人站 / SaaS

做个人站 Next.js 是 2026 默认答案。

课程地图

环境 (02-04)        → 装 + 起 Next.js 项目
基础 (05-08)        → JSX / 组件 / 状态 / 样式
路由 (09-10)        → App Router + Layout
数据 (11-12)        → Server Component fetch + 图片
博客 (13-14)        → MDX 写文章 + Server Action 表单
上线 (15-17)        → SEO + Vercel / 自家 VPS

起点假设

  • 会基本 HTML / CSS（不强求会 React）
  • 会基本 JS（能看懂 const fn = () => {}）
  • 会用命令行（cd / ls 等）

不会也别担心——前面有 Node.js 教程和 Linux 教程打底。

最终成果

读完你会有：

  • ✓ 一个真实可访问的个人网站
  • ✓ Markdown 写文章
  • ✓ 每页 SEO 友好
  • ✓ 暗色模式 / 响应式
  • ✓ 部署在你想要的地方（Vercel 免费 / 自家 VPS）

下一篇：为什么选 React。