用 Next.js 15 搭建个人博客的若干笔记

为什么是 Next.js 15

我之前折腾过 Hugo、Hexo、Astro，最后还是落到了 Next.js。理由很简单：

1. 生态最熟悉：React 用得最多，组件复用成本最低
2. App Router 心智模型清晰：服务器组件默认，需要交互再 "use client"
3. 图片、字体、路由全部内置：少装一堆插件

目录结构

我的项目布局非常朴素：

src/
  app/
    layout.tsx        # 全局布局
    page.tsx          # 首页
    blog/
      page.tsx        # 列表
      [slug]/page.tsx # 详情
  components/         # 共用组件
  lib/                # 工具函数
content/
  blog/*.md           # 文章

Markdown 处理

读取部分非常直接，App Router 的服务器组件可以直接用 Node.js API：

import fs from "node:fs";
import path from "node:path";
import matter from "gray-matter";

const filePath = path.join(process.cwd(), "content/blog", `${slug}.md`);
const raw = fs.readFileSync(filePath, "utf8");
const { data, content } = matter(raw);

渲染部分用 react-markdown + remark-gfm + rehype-highlight：

库	作用
react-markdown	markdown → JSX
remark-gfm	GFM 扩展（表格、删除线、任务列表）
rehype-highlight	代码高亮（基于 highlight.js）
rehype-slug	给标题加 id，便于做目录

几个小坑

• params 是 Promise：Next.js 15 里 params 需要 await 才能拿到值
• CSS 全局化：Tailwind v4 的 @import "tailwindcss" 已经不再需要 @tailwind base/components/utilities
• highlight.js 主题：直接在 globals.css 里 @import "highlight.js/styles/github-dark.css" 即可

下一步

接下来我想加：

• RSS 订阅
• 评论系统（giscus）
• 文章搜索
• 简单的访问统计

慢慢来。