在 Next.js 15 中构建属于自己的极简主义互动博客

作为一名前端工程师，你的个人博客不仅是沉淀技术的载体，本身更是你对外输出技术理念、展示审美深度的极佳“试验田”。

我曾尝试过包括 Hexo、Hugo、Ghost 等众多流行的方案，但在高度定制动画过渡与交互细节时往往感到力不从心。最终，我选择了 Next.js App Router 配合无依赖的极简架构。

技术栈选择思路#

1. 框架层：Next.js 15 App Router (React 19) 它完美的 ISR / SSG 支持，能确保最终用户访问页面时的加载时间无限趋近于零；而 generateStaticParams 让我们在构建期就能将繁重的 Markdown 解析消耗掉。
2. 样式控制：抛弃 TailwindCSS 的“模板感” 采用 CSS Variables (globals.css)。在需要高度自定义的玻璃拟物化（Glassmorphism）和精细的边距控制时，手写 CSS 能让代码更具描述性且减少类名污染。

Markdown 解析的乐趣#

自己动手解析 .md 提供了极高的拓展自由度。在 Node 环境下，仅靠 gray-matter 与 fs，我们便可动态获取前缀 meta 信息。例如，以下是一个读取文件的简化片段：

import fs from "fs";
import matter from "gray-matter";

const raw = fs.readFileSync('post.md', 'utf8');
const { data, content } = matter(raw);

console.log(data.title); // 获取标题

甚至未来我还可以把 Notion 作为数据源，只要格式映射做的好，一切都水到渠成。

结语#

保持简单，保持好奇。 这篇用 Markdown 写的博文正是这个博客平台支持的第一篇文章。希望你能喜欢这种纯粹的沉浸式阅读体验。