从 0 初始化 Next.js 15、TypeScript 和 Tailwind 项目

Tutorial Path

从 0 搭建一个可持续写作的 Next.js 个人网站

当前位置：02 / 10

先搭对地基，而不是先追逐热门词。

技术栈选择最怕两种极端：一种是完全追新，什么新就上什么；另一种是只求熟悉，不考虑后续维护成本。对于内容型个人网站来说，我更看重的是稳定的路由体系、清晰的服务端渲染能力、对 SEO 友好的输出方式，以及后续能够平滑扩到后台、订阅、工具页的空间。

为什么我会选 Next.js 15

对这种以内容为主的网站来说，Next.js 的优势不是“全能”，而是几个关键能力恰好拼在一起：

• App Router 让路由、布局、metadata、图片路由、feed 路由能放在一套统一约定里。
• Server Components 让列表页和详情页天然更适合直接读内容源，而不是先把一堆数据打到客户端再计算。
• 框架自带的 sitemap、robots、OG Image 路由，让 SEO 能力不需要额外东拼西凑。

教程型网站的很多页面，本质上都偏静态和可缓存，这正是 Next.js 擅长的场景。

TypeScript 在这里不是“高级配置”，而是防止内容系统失控

很多人觉得个人网站简单，不需要 TypeScript。但一旦你的网站开始有博客、项目、笔记三套 frontmatter，开始有分类、标签、分页、feed、SEO 输出，类型约束就会很快变成节省时间的工具。

比如你给博客规定 title、description、date、category 必填，给项目规定 featured、github、demo 可选，给笔记允许更轻量的结构。没有类型和 schema 时，这些规则只能靠记忆；有了类型和校验，它们就能在读取阶段直接报错。

Tailwind 适合这种项目，不是因为快，而是因为一致

内容站点的页面很多，且样式高度重复：卡片、标签、目录、提示块、空状态、分页、正文排版。Tailwind 的最大价值在这里不是“写得快”，而是你能用同一套设计 token 和语义类名把这些页面维持在一致的视觉系统里。

同时，这个项目还搭配了 shadcn/ui 作为基础组件来源。这样一来，我们不需要重复发明 button、card、alert 这些基础元素，可以把精力放在真正与内容相关的部分。

初始化阶段我会提前确定的约束

我通常会在第一天就确定几件事：

1. 内容目录必须独立于页面代码。
2. 分类和标签必须有统一配置入口。
3. 页面默认优先使用 Server Components。
4. 未来所有文章、项目、笔记都要走同一条 frontmatter 校验链路。
5. 所有文本文件统一 UTF-8 + LF，避免后面出现不可控的乱码问题。

这些约束看起来像“多做了点准备”，但它们会显著降低中后期返工概率。

这一阶段的产出应该是什么

初始化完成并不意味着你的网站已经“做完了”，而是意味着你有了一块适合继续施工的地基。一个好的初始化结果至少应该满足：能稳定起项目、能明确目录职责、能为后续内容系统留好接口。

接下来真正重要的问题不是“还缺什么页面”，而是“这个站点到底准备承载哪些内容”。所以下一篇，我们先不写首页，而是先把内容模型想清楚。