使用 Next.js 与 Tailwind 搭建个人博客

这篇文章记录了本博客的搭建过程，包含初始化命令与依赖说明。

初始化项目

npx create-next-app@latest my-blog --ts --tailwind --eslint --app --src-dir --import-alias "@/*"

安装依赖

npm install gray-matter next-mdx-remote remark-gfm remark-math \
  rehype-highlight rehype-katex next-themes

目录结构

content/posts/          # 存放 Markdown 文章
src/config/             # 站点全局配置（site.config.ts）
src/components/         # Header / Footer / PostCard / TOC / ThemeToggle
src/lib/posts.ts        # 读取与解析文章的公共函数
src/app/posts/[slug]/   # 文章详情页

表格示例（GFM）

模块	用途
next-mdx-remote	编译 Markdown / MDX
rehype-highlight	代码高亮
rehype-katex	数学公式
next-themes	暗色模式