MyBlog 项目介绍 — 基于 Next.js 的全栈博客系统

项目概述

MyBlog 是一个使用现代 Web 技术栈构建的全栈博客系统，专为个人博主和技术写作者设计。项目采用 Next.js 16 App Router 架构，结合 Prisma ORM 和 PostgreSQL 数据库，部署在 Vercel 平台上。

技术栈

层级	技术	说明
前端框架	Next.js 16	App Router + React Server Components
样式方案	Tailwind CSS v4	原子化 CSS，支持暗色模式
数据库	PostgreSQL (Neon)	Serverless Postgres，自动扩缩容
ORM	Prisma 7	类型安全的数据库访问层
图片存储	Vercel Blob	边缘 CDN 加速的对象存储
部署平台	Vercel	自动 CI/CD，全球边缘网络
认证方式	JWT	无状态认证，Cookie + Bearer Token

核心功能

博客管理

• 富文本编辑器（TipTap），支持代码高亮、图片插入、表格等
• 文章支持草稿/发布状态切换
• 封面图设置，首页自适应展示
• 自动生成 URL Slug
• 上下篇文章导航
• Markdown 导出下载

笔记系统

• 独立于博客的轻量笔记功能
• 支持公开/私密切换
• 独立分类体系

分类与标签

• 分类按类型区分（博客分类 / 笔记分类）
• 标签支持多对多关联
• 侧栏标签云，按文章数量展示
• 点击标签筛选相关文章

图片管理

• 拖拽上传图片到 Vercel Blob
• 图片列表管理，一键复制链接
• 支持在文章和笔记中引用

前台体验

• 响应式设计，完美适配移动端
• 亮色/暗色主题切换
• 全文搜索功能
• 分页浏览
• 归档时间线视图
• 骨架屏加载动画

性能优化

• ISR（增量静态再生）— 页面自动缓存与按需刷新
• React cache() 消除重复数据库查询
• generateStaticParams 预生成所有文章和笔记页面
• 后台写操作自动触发 revalidatePath 刷新前台缓存
• 乐观 UI 更新 — 删除操作即时响应

项目结构

src/
├── app/
│   ├── (public)/          # 前台页面
│   │   ├── page.tsx       # 首页（文章列表 + 侧栏）
│   │   ├── blog/[slug]/   # 文章详情
│   │   ├── notes/         # 笔记列表
│   │   ├── notes/[id]/    # 笔记详情
│   │   ├── archive/       # 归档
│   │   └── about/         # 关于
│   ├── admin/             # 后台管理
│   │   ├── dashboard/     # 仪表盘
│   │   ├── posts/         # 文章管理
│   │   ├── notes/         # 笔记管理
│   │   ├── images/        # 图片管理
│   │   └── categories/    # 分类标签
│   └── api/               # RESTful API
├── components/            # 共享组件
└── lib/                   # 工具库

线上地址

博客前台：https://blog.1752667613.xyz

管理后台：https://blog.1752667613.xyz/admin/login