用 Next.js 从零搭建个人博客

这篇文章记录本博客的技术方案，方便以后维护，也希望能帮到想自己搭站的人。

技术选型

• Next.js（App Router）：页面、布局、路由都写在 app/ 目录里；
• 本地 Markdown 数据：文章放在 content/posts/，构建时读取，不接数据库；
• react-markdown：把 Markdown 安全地渲染成页面内容。

目录速览

• app/ —— 所有页面与路由；
• components/ —— 头部、文章卡片、搜索等组件；
• content/ —— 站点配置、文章、项目数据；
• lib/ —— 读取和整理数据的工具函数。

新增一篇文章

在 content/posts/ 下新建 .md 文件，写上标题、日期、标签即可：

---
title: 文章标题
date: 2026-08-04
tags: [随笔]
excerpt: 一句话摘要
---

正文直接写 Markdown，保存后运行 npm run dev 就能在本地预览。