这是一个基于 Next.js 16 (App Router) 和 Supabase 构建的现代化 个⼈博客系统。
它不仅仅是一个内容管理系统(CMS),更是一个注重阅读体验和视觉美感的数字空间。项目融合了极简主义设计风格、流畅的交互动画以及强大的写作工具,旨在为创作者提供最纯粹的表达平台,为读者提供最舒适的阅读环境。
- 现代化设计: 采用 shadcn/ui 组件库,结合 Glassmorphism (毛玻璃) 效果,界面干净、通透。
- 响应式交互: 完美适配移动端与桌面端,包含优雅的侧滑菜单与手势交互。
- 深色模式: 完美的系统级深色模式支持,护眼且炫酷。
- 排版美学: 集成 Noto Serif SC (思源宋体),为标题和文学内容带来印刷品般的阅读质感。
- 流畅动画: 基于 Framer Motion 的页面转场、开屏动画 (Splash Screen) 和微交互。
- 双模编辑器: 基于 Tiptap 构建,支持 所见即所得 (WYSIWYG) 与 Markdown 源码 双向切换。
- 智能辅助: 支持图片粘贴自动上传、拖拽排序、智能目录生成。
- 内容变现: 集成了作者个人名片页设置与打赏码配置(支持微信/支付宝打赏)。
- 全栈类型安全: TypeScript + Supabase 生成类型,确保前后端数据链路安全。
- 企业级认证: 完整的用户认证流程,支持头像上传(自动压缩与清理)、资料管理。
- 高性能: Next.js 服务端组件 (RSC)、服务端 Markdown、流式评论与按需资源加载;基线和回归标准见 页面加载性能与服务端边界。
- SEO 友好: 自动生成 Sitemap、Robots 配置与 JSON-LD 结构化数据,搜索引擎完美抓取。
- 框架: Next.js 16 (App Router)
- 语言: TypeScript
- 样式: Tailwind CSS 4
- 组件库: shadcn/ui
- 动画: Framer Motion
- 数据库/认证: Supabase (PostgreSQL)
- 编辑器: Tiptap
环境要求:Node.js >= 22.0.0。
git clone https://github.com/ZiYan416/Blog
cd blog推荐使用 npm 进行依赖管理:
npm install复制 .env.local.example 到 .env.local 并在其中填入你的 Supabase 配置信息:
cp .env.local.example .env.local文章图片默认保存到 Supabase Storage。若要启用 CloudFlare-ImgBed,请仅在服务端配置可选的
IMGBED_API_TOKEN;不要使用 NEXT_PUBLIC_ 前缀。部署、权限与图片清理策略见
图片存储与生命周期管理。
npm run dev现在你可以访问 http://localhost:3000 预览项目。
源码采用“路由编排 + 领域模块 + 共享基础设施”的组织方式:
src/app:Next.js 路由、页面和 Route Handlers。src/features:认证、文章、评论、标签、资料、后台等领域代码。src/components:仅保留跨页面布局和领域无关 UI。src/server/src/db:服务端仓储、缓存与数据库类型边界。
新增或移动代码前,请阅读 项目结构与模块边界。
我们非常欢迎且感谢任何形式的贡献!无论是提交 Issue, 增加 Feature 还是改进文档,所有的工作都有助于让项目变得更好。
参与贡献前,请务必阅读我们的 贡献指南 (CONTRIBUTING.md) 和 项目结构规范。如果你遇到 Bug 或有好的建议,可以参阅对应的模板:
本项目基于 MIT License 许可开源。你可以自由地学习、修改和用于任何商业或非商业项目。