Kto-Blog

Next.js Blog Project

Modern personal blog system based on Next.js 14 App Router, supports MDX, authentication, search and more

Next.js Blog Project - Screenshot 1
Click to view larger
1 / 7
Live DemoSource Code
Next.jsReactTypeScriptSSRMDXTailwind CSS

项目简介

这是一个功能完整的个人博客系统，基于 Next.js 14 (App Router) 构建。项目采用现代化的技术栈，具有良好的性能和用户体验。博客支持 MDX 格式的内容创作，集成了完整的用户认证系统、搜索功能、评论系统等，适合作为个人技术博客或作品集展示平台使用。

系统架构

┌─────────────────────────────────────────────────────────────┐
│                        用户界面层                           │
├─────────────────────────────────────────────────────────────┤
│  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────┐ │
│  │ 首页展示  │  │  博客列表  │  │ 项目展示  │  │   关于   │ │
│  └──────────┘  └──────────┘  └──────────┘  └──────────┘ │
│  ┌──────────────────────────────────────────────────────┐  │
│  │            搜索 (Kbar) + 目录导航 (TOC)             │  │
│  └──────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────┘
                              │
┌─────────────────────────────────────────────────────────────┐
│                     Next.js App Router                      │
├─────────────────────────────────────────────────────────────┤
│  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────┐ │
│  │ 页面组件  │  │  布局组件  │  │ UI 组件   │  │ 业务逻辑  │ │
│  └──────────┘  └──────────┘  └──────────┘  └──────────┘ │
└─────────────────────────────────────────────────────────────┘
                              │
┌─────────────────────────────────────────────────────────────┐
│                        服务层                              │
├─────────────────────────────────────────────────────────────┤
│  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────┐ │
│  │ 认证 API  │  │ 评论系统  │  │ 搜索索引  │  │ 日志系统  │ │
│  │(Logto)   │  │          │  │  (Kbar)  │  │          │ │
│  └──────────┘  └──────────┘  └──────────┘  └──────────┘ │
└─────────────────────────────────────────────────────────────┘
                              │
┌─────────────────────────────────────────────────────────────┐
│                      数据层                                 │
├─────────────────────────────────────────────────────────────┤
│  ┌──────────┐  ┌──────────┐  ┌──────────┐               │
│  │PostgreSQL │  │  Prisma  │  │  Contentlayer │            │
│  │           │  │    ORM   │  │   (MDX)      │            │
│  └──────────┘  └──────────┘  └──────────┘               │
└─────────────────────────────────────────────────────────────┘

数据流向

用户访问
    │
    ▼
┌─────────────┐
│ Next.js SSR │
└─────────────┘
    │
    ├─► 静态页面 (HTML)
    │
    ├─► 动态 API (Server Actions)
    │
    └─► 内容数据
         │
         ├─► MDX 文件 → Contentlayer → JSON
         │
         └─► 数据库 → Prisma → PostgreSQL

技术栈

这是一个功能完整的个人博客系统，基于 Next.js 14 (App Router) 构建。项目采用现代化的技术栈，具有良好的性能和用户体验。博客支持 MDX 格式的内容创作，集成了完整的用户认证系统、搜索功能、评论系统等，适合作为个人技术博客或作品集展示平台使用。

技术栈

前端框架

  • Next.js 14 - React 框架，使用 App Router 架构
  • React 18 - UI 库
  • TypeScript - 类型安全

样式方案

  • Tailwind CSS - 实用优先的 CSS 框架
  • Framer Motion - 动画效果库
  • Radix UI - 无样式的可访问组件

内容管理

  • MDX - Markdown + JSX，支持在 Markdown 中使用 React 组件
  • Contentlayer - 内容处理和数据生成
  • rehype-prism-plus - 代码语法高亮
  • KaTeX - 数学公式渲染

后端 & 数据

  • PostgreSQL - 关系型数据库
  • Prisma - ORM 框架
  • Logto - 身份认证服务

开发工具

  • ESLint - 代码检查
  • Prettier - 代码格式化
  • Husky - Git Hooks 管理

核心功能

1. 内容管理系统

MDX 文章撰写

  • 使用 MDX 格式撰写博客文章
  • 支持丰富的 Markdown 语法（GFM）
  • 可在文章中嵌入 React 组件
  • 自动生成文章目录 (TOC)

内容处理

  • Contentlayer 自动处理 MDX 文件
  • 支持代码语法高亮（多种语言）
  • 支持数学公式渲染
  • 支持引用文献 (Citation)
  • GitHub 风格的警告框

搜索功能

  • 集成 Kbar 全局搜索
  • 自动生成搜索索引
  • 支持快捷键唤起搜索 (Cmd/Ctrl + K)

2. 用户认证系统

Logto 集成

  • 完整的用户注册/登录流程
  • 支持多种登录方式（邮箱、GitHub 等）
  • JWT 令牌管理
  • 会话自动刷新

权限管理

  • 基于角色的访问控制 (RBAC)
  • 支持 test、admin、user 三种角色
  • 细粒度的权限控制
  • 权限验证中间件

3. 项目展示系统

项目列表页

  • 卡片式项目展示
  • 精选项目独立展示
  • 按自定义顺序排序
  • 标签筛选功能

项目详情页

  • 完整的项目介绍
  • 图片轮播展示
  • 目录导航
  • 在线演示和源代码链接

MDX 项目内容

  • 每个项目独立的 MDX 文档
  • 支持 Markdown 格式的详细说明
  • 代码示例、技术栈介绍
  • 安装使用指南

4. 评论系统

BlogComments 组件

  • 集成评论功能
  • 用户认证后可评论
  • 评论数据持久化存储

5. 其他功能

响应式设计

  • 完美适配移动端、平板、桌面
  • 移动端优化的导航菜单
  • 图片自适应加载

SEO 优化

  • 自动生成 Meta 标签
  • 结构化数据 (JSON-LD)
  • RSS 订阅支持
  • Sitemap 自动生成

性能优化

  • 服务端渲染 (SSR)
  • 静态页面生成 (SSG)
  • 图片优化 (Next/Image)
  • 字体优化
  • 代码分割

目录结构

nextjs-blog/
├── app/                    # Next.js App Router 页面
│   ├── api/               # API 路由
│   │   ├── logto/         # Logto 认证 API
│   │   └── ...
│   ├── blog/             # 博客页面
│   ├── projects/         # 项目展示页面
│   └── page.tsx          # 首页
├── components/            # React 组件
│   ├── project/          # 项目相关组件
│   ├── comments/         # 评论组件
│   └── ...
├── data/                 # 数据文件
│   ├── blog/             # 博客 MDX 文件
│   ├── projects/         # 项目 MDX 文件
│   ├── authors/          # 作者信息
│   └── siteMetadata.ts   # 网站元数据
├── lib/                  # 工具函数
│   ├── logger.ts         # 日志系统
│   ├── logto/            # Logto 工具
│   └── prisma.ts         # 数据库客户端
└── prisma/               # Prisma 配置

项目亮点

  • ✅ 完整的用户认证和权限管理
  • ✅ MDX + Contentlayer 内容管理
  • ✅ Kbar 全局搜索
  • ✅ 项目展示系统（列表 + 详情页）
  • ✅ 评论系统
  • ✅ TOC 目录导航
  • ✅ 响应式设计
  • ✅ 深色模式支持
  • ✅ SEO 优化
  • ✅ 类型安全（TypeScript）