Minimalist AI Blog Frontend

项目简介

基于 Next.js 16 + Rust 后端的极简主义博客系统前端。采用瑞士风格设计（黑白灰配色、Inter 字体），专注于内容展示。

技术栈

• 框架: Next.js 16 (App Router)
• 语言: TypeScript
• 样式: Tailwind CSS v4 + @tailwindcss/typography
• 渲染: React Markdown + Rehype Highlight (代码高亮)
• 部署: Docker + Docker Compose

功能特性

• 🎨 极简设计: 纯粹的内容阅读体验，无干扰元素
• 📝 Markdown 支持: 完美支持 GFM 语法和代码高亮 (GitHub Light 主题)
• 📱 完全响应式: 适配移动端和桌面端
• 🔐 后台管理: 集成登录、文章发布、编辑和删除功能
• ⚡ 高性能: 基于 Next.js 静态生成与增量更新
• 🐳 Docker 部署: 一键构建与启动

快速开始

1. 本地开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

访问 http://localhost:3000 查看效果。

2. 构建生产版本

npm run build
npm start

Docker 部署

本项目支持使用 Docker Compose 一键部署，无需手动配置 Node.js 环境。

部署步骤

1. 克隆仓库

   git clone <your-repo-url>
   cd rs-blog
   

2. 配置后端地址 打开 docker-compose.yml 文件，修改 NEXT_PUBLIC_API_URL 为你的服务器公网 IP 或域名：

   args:
     # 将此处修改为你的服务器 IP 或域名
     NEXT_PUBLIC_API_URL: http://your-server-ip:8765
   

   注意: 不要使用 127.0.0.1 或 localhost，因为这是构建在前端代码中的地址，用户浏览器需要能够直接访问该地址。

3. 启动服务

   docker-compose up -d --build
   

4. 查看日志 (可选)

   docker-compose logs -f
   

服务将在 http://your-server-ip:3000 启动。

环境变量

变量名	描述	默认值
NEXT_PUBLIC_API_URL	后端 API 地址	http://127.0.0.1:8765

项目结构

src/
├── app/                 # Next.js 页面路由
│   ├── admin/           # 后台管理页面
│   ├── login/           # 登录页面
│   └── posts/           # 文章详情页
├── components/          # React 组件
│   ├── layout/          # 布局组件 (Header, Footer)
│   ├── post/            # 文章相关组件
│   └── ui/              # 基础 UI 组件 (Button, Input)
├── lib/                 # 工具库 (API 客户端, Hooks)
└── types/               # TypeScript 类型定义