用 Next.js 15 搭建一个「简而不陋」的个人博客
为什么又造了一个博客轮子
市面上的博客系统不算少——WordPress 臃肿、Hexo/Hugo 静态生成缺少动态交互、各类 SaaS 平台又受限于定制空间。作为一个开发者，我想要的是：够轻、够快、够自由。
但说实话，放在以前，从零搭建一套功能完整的博客系统，光靠一个人的精力，要么得砍功能，要么得熬大夜。而现在情况不同了——AI 编程工具的成熟，让「一个人就是一支队伍」从口号变成了现实。
于是就有了这个项目。它不是一个面面俱到的 CMS，而是一个为个人写作者量身定制的博客系统——该有的功能一个不少，不该有的复杂度一点不多。
AI 辅助开发：一个人扛起全栈
在聊具体功能之前，我想先聊聊这个项目背后一个不可忽视的角色——AI 编程助手。
这个项目中的绝大多数代码都是由 AI 工具生成的。从数据库建模到前后端接口，从页面布局到交互动效，AI 承担了大量编码工作。我的角色更像是一个产品经理兼架构师：决定要做什么、怎么组织、体验该是什么感觉，然后把实现交给 AI。
这带来了一种全新的开发节奏：
- 想法到原型的距离被大幅缩短。脑海中冒出一个功能点，描述清楚需求，几分钟就能看到可运行的版本。
- 技术栈的切换成本几乎为零。不需要在某个框架上积累数年经验，AI 对主流技术栈都有足够的知识储备，可以随时调用。
- 精力得以聚焦在真正重要的事情上——用户体验、交互细节、信息架构，而非陷入 API 文档和语法细节的泥沼。
当然，AI 生成的代码并不总是完美的。理解、审查、调试和优化依然是不可或缺的环节。但不可否认的是，AI 把「全栈开发」的门槛拉到了一个前所未有的低点。
技术选型：站在 2026 年的前沿
整个项目基于 Next.js 15 构建，采用 App Router 路由架构，全面拥抱 React 19。数据库使用 PostgreSQL 配合 Prisma ORM，样式方案选择了 Tailwind CSS v4。
为什么选这套组合？
- Next.js 15 + App Router：服务端渲染、Server Actions、流式加载，开箱即用。
- React 19：享受最新的并发特性和性能优化。
- Prisma：类型安全的数据库操作，告别手写 SQL 的繁琐。
- Tailwind CSS v4：原子化样式，开发效率和一致性兼得。
得益于 AI 对这些框架的深度理解，即便是初次接触 Next.js 15 的 App Router 模式，也能在 AI 的引导下快速上手，少走了很多弯路。
前台：阅读体验优先
首页与文章列表
首页以 Hero 轮播区展示推荐文章，视觉焦点突出。文章列表支持分页视图和瀑布流视图两种模式自由切换，满足不同浏览习惯。
文章阅读页
阅读页是博客的核心体验。这里做了几件关键的事：
- 目录导航：自动提取 Markdown 标题生成侧边目录，长文不再迷路。
- 代码高亮：支持多种编程语言的语法高亮，并提供亮色/暗色代码主题切换。
- 排版舒适：正文宽度经过精心调整，与封面图片保持一致的布局节奏。
分类与标签
分类和标签不是简单的文字列表——每个分类和标签都有基于名称自动生成的专属配色，让信息结构一目了然。
归档页
归档页按年月分组展示所有文章，时间线清晰，方便回溯。
后台管理：写作效率至上
后台管理界面是这套系统另一个重点打磨的部分。这里的设计思路很明确：把管理成本降到最低，让注意力集中在写作本身。
Markdown 编辑器
编辑器支持实时预览、目录导航，以及图片的拖拽和粘贴上传（通过阿里云 OSS STS 临时凭证，安全且高效）。写文章的流程尽可能做到零干扰——打开编辑器，写就是了。
文章管理
- 列表支持多维度排序、搜索、筛选
- 一键切换文章推荐状态
- 支持批量删除
- 草稿改动管理，未发布的修改不会误上线
- Markdown 文件批量导入，从其他平台迁移无压力
文章状态覆盖了草稿、已发布、私密、回收站四种，完整覆盖内容生命周期。
其他管理模块
分类、标签、友情链接的增删改查自不必说。此外还有：
- 访问统计仪表盘：PV/UV 趋势图、热门页面排行，了解读者从哪来、看什么。
- 系统管理：支持 Favicon 等站点配置的动态修改。
- 个人设置：头像上传、密码修改。
部署：简单可靠
项目提供了完整的 Docker 支持，一个 docker-compose up 即可拉起整个环境（包括数据库）。环境变量通过 .env 文件管理，配置模板开箱即用。
写在最后
这个博客系统的设计哲学很简单：让技术为内容服务。炫技不是目的，写出一篇好文章时的流畅体验才是。
而 AI 工具让这一切变得触手可及。它没有取代思考，而是放大了执行力——你只需要想清楚「要什么」，剩下的，「怎么做」已经有了一个得力的搭档来帮你完成。
如果你也在寻找一个轻量、现代、可定制的博客方案，不妨试试。
本项目基于 Next.js 15 / React 19 / Prisma / PostgreSQL / Tailwind CSS 构建，支持 Docker 一键部署。大部分代码由 AI 辅助生成。