grace@dev-site:~$✏write
← blog/

用 Next.js 搭建个人技术博客

Next.jsTypeScriptWebMDX

记录这个网站的构建过程，包括 VS Code 风格主题、MDX 支持和在线写作功能的实现思路。

用 Next.js 搭建个人技术博客

最近用 Next.js 16 重新搭建了自己的个人网站，这篇文章记录一下核心设计思路。

技术栈

  • 框架：Next.js 16（App Router）
  • 语言：TypeScript
  • 样式：Tailwind CSS v4 + CSS Variables
  • 内容：MDX + gray-matter（本地文件系统）
  • 编辑器：@uiw/react-md-editor

核心特性

1. VS Code 主题

整站以 VS Code Dark+ 为设计参考，核心颜色通过 CSS 变量管理：

:root {
  --vsc-bg: #1e1e1e;
  --vsc-sidebar: #252526;
  --vsc-accent: #007acc;
  --vsc-teal: #4ec9b0;
  --vsc-yellow: #dcdcaa;
}

2. MDX 内容管理

文章以 .mdx 文件存储在 content/ 目录，配合 frontmatter 管理元数据：

---
title: "文章标题"
date: "2024-04-20"
tags: ["Next.js", "Web"]
description: "文章摘要"
---

# 正文内容...

3. 在线写作

管理员面板 /admin/write 提供了一个基于 @uiw/react-md-editor 的在线编辑器， 填写标题、标签后直接在浏览器里写 Markdown，保存后通过 API 路由写入文件系统。

目录结构

app/
  blog/           # 博客
  projects/       # 项目
  games/          # 小游戏
  about/          # 关于
  admin/          # 写作面板
  api/posts/      # REST API
content/
  blog/           # 博客文章 (.mdx)
  projects/       # 项目文章 (.mdx)
components/       # 公共组件
lib/              # 工具函数

这个方案的优点是零外部数据库依赖，文章直接存在 Git 仓库里，版本管理简单直接。

✏ 编辑此文章