用 Next.js 搭建个人博客的思路

想搭一个自己的 wiki / 博客时，最常见的纠结是：用静态站点生成器（Hexo、Hugo、VitePress）， 还是自己写？我最后选择了 Next.js 自己写，理由如下。

为什么不用现成的生成器

静态生成器开箱即用，但主题定制往往要在别人的模板缝里缝缝补补。 而我想要的是一个完全按自己的审美来的首页——便当盒布局、玻璃拟态、实时时钟， 这些东西用生成器的主题系统反而绕远。

核心实现

1. 文章即文件

每篇文章就是 content/posts 下的一个 .md 文件，用 gray-matter 解析 frontmatter：

const { data, content } = matter(raw);
// data.title / data.date / data.tag / data.excerpt

服务端组件里直接 fs.readdirSync 读目录，不需要数据库， generateStaticParams 让构建时把所有文章页预渲染成静态 HTML。

2. 玻璃拟态卡片

一个可复用的 .glass-card 工具类：

.glass-card {
  @apply rounded-3xl border border-white/60 bg-white/40
         shadow-[0_8px_30px_rgba(120,150,140,0.12)]
         backdrop-blur-md;
}

配上柔绿的渐变背景，卡片就有了那种「浮在果冻上」的质感。

3. 客户端小组件

时钟、日历、点赞按钮都是小的客户端组件（"use client"）， 其余页面保持服务端渲染，性能和交互两不误。

小结

自己写博客系统的工作量其实不大——路由、Markdown 渲染、列表页加起来也就几百行代码， 换来的是 100% 的设计自由度。值得。