从零搭建个人博客：为什么选择 Next.js + MDX

为什么还要写博客？

2026 年了，短视频统治一切。但文字有一件事视频永远做不到——可检索。

你写的每一篇文章，都是你数字大脑的外部存储。三年后有人遇到同样的问题，搜索引擎会把他带到你面前。这种复利，短视频给不了。

技术选型：少即是多

选技术栈的原则很简单：

每一行依赖都是债务。只为你真正需要的功能买单。

Next.js App Router

不是因为它火，是因为 Server Components + 文件系统路由天然适合博客：

• 文章是静态内容 → 在服务端编译 MDX，客户端零 JS
• 文件即路由 → 新增文章不需要改路由配置
• generateStaticParams → 全站静态生成，部署到任何 CDN

MDX：在 Markdown 里写 React

普通 Markdown 只能写死内容。MDX 可以在文章里嵌入交互组件：

// 一个会动的计数器——嵌入在文章中
function Counter() {
  const [count, setCount] = React.useState(0);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      点了 {count} 次
    </button>
  );
}

这就是 MDX 的威力——你的文章是活的。

Tailwind CSS v4

不是因为它流行，是因为它的约束就是最好的设计师。

| 方案 | 问题 | |------|------| | 手写 CSS | 命名地狱，三个月后自己看不懂 | | CSS-in-JS | 运行时开销，博客不需要 | | Tailwind | 类名即设计约束，写不出丑东西 |

什么是"好"博客设计？

三个原则：

1. 克制 — 一个强调色就够了。蓝色链接 + 灰色文字 + 暖白背景。
2. 留白 — 行间距 1.8、段落间距大、内容区 65-70 字符宽。
3. 层次 — h1 → h2 → h3 一眼分清，不需要思考。

高级感 = 克制 + 留白 + 一个亮点。

代码高亮配置

用 rehype-pretty-code + shiki 实现：

// next.config.ts
import rehypePrettyCode from "rehype-pretty-code";

const withMDX = createMDX({
  options: {
    rehypePlugins: [
      [rehypePrettyCode, { theme: "github-dark" }],
    ],
  },
});

# 支持多语言高亮
def fibonacci(n: int) -> list[int]:
    """生成斐波那契数列"""
    a, b = 0, 1
    result = []
    for _ in range(n):
        result.append(a)
        a, b = b, a + b
    return result

print(fibonacci(10))  # [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

文章工作流

# 1. Claude Code 创建草稿
/new-post

# 2. 本地预览
npm run dev

# 3. 部署
/deploy

整个流程遵循"先问清楚再动手"的模式——这是 Claude Code 的核心工作哲学。

下一步

这个博客会持续进化。计划中的功能：

• [ ] RSS 订阅
• [ ] 标签系统
• [ ] 暗色模式自动切换
• [ ] 阅读进度条
• [ ] 上一篇 / 下一篇导航

---

感谢阅读。 如果你也在搭建自己的博客，希望这篇文章帮你少走一点弯路。