🚀 AI N8N - 企业级 AI 自动化内容管理平台

AI N8N 是一个基于 Next.js 15 构建的现代化全栈 SaaS 平台，专为内容创作者、开发者和企业打造。集成了博客管理、图片资产库、工作流自动化、支付订阅和AI 能力，让您快速构建和商业化自己的内容平台。

---

✨ 核心特性

🎯 内容管理系统

• 📝 博客系统 - 支持 Markdown 编辑、分类管理、多语言内容
• 🖼️ 图片资产库 - 集成 Cloudflare Images，支持文件上传、URL导入、批量管理
• 📚 教程系统 - 分层级教程管理，支持进度跟踪
• 💼 用例展示 - 项目案例管理和展示平台

⚙️ 自动化工作流

• 🔄 可视化工作流 - 基于 n8n 的自动化流程构建器（开发中）
• 🤖 AI 集成 - 统一 AI 网关，支持多种大语言模型
• 📊 数据分析 - 用户行为跟踪和内容统计

💳 商业化功能

• 💰 Stripe 支付 - 完整的订阅和一次性支付系统
• 👥 用户管理 - 基于 Clerk 的完整用户认证和权限管理
• 📈 订阅管理 - 多层级会员体系和使用限额控制

🌍 国际化和优化

• 🗣️ 多语言支持 - 开箱即用的中英双语，易于扩展
• 🎨 响应式设计 - 基于 Tailwind CSS 和 shadcn/ui 的现代化界面
• ⚡ 性能优化 - Next.js 15 App Router，Server Components，优化的 SEO

🏗️ 技术架构

核心技术栈

技术领域	技术选型	版本	用途说明
前端框架	Next.js	15.3.3	App Router、RSC、混合渲染
开发语言	TypeScript	5+	全栈类型安全
数据库	PostgreSQL + Drizzle ORM	0.43.1	类型安全的数据库操作
认证系统	Clerk	6.20.0	企业级用户管理
UI 组件	shadcn/ui + Radix UI	Latest	无头组件库 + 设计系统
样式方案	Tailwind CSS	3.4.1	原子化 CSS
数据校验	Zod	3.24.1	运行时类型校验
数据请求	SWR	2.3.3	客户端数据管理
支付系统	Stripe	18.2.1	订阅和支付处理
国际化	next-intl	4.1.0	类型安全的多语言
媒体存储	Cloudflare Images	1.0.2	全球 CDN 图片处理

🏛️ 架构设计理念

1. 功能模块化（Feature-First Architecture）

src/features/
├── blogs/          # 博客功能模块
│   ├── actions/    # Server Actions（服务端逻辑）
│   ├── components/ # React 组件
│   ├── hooks/      # SWR 数据请求钩子
│   ├── schemas.ts  # Zod 校验规则
│   └── types/      # TypeScript 类型定义
├── images/         # 图片管理模块
├── workflows/      # 工作流模块
├── payment/        # 支付模块
└── ...

优势：

• 🧩 高内聚低耦合 - 每个功能模块独立完整
• 🔧 易于维护 - 功能边界清晰，便于团队协作
• 📦 可插拔设计 - 轻松添加/移除功能模块
• 🚀 快速扩展 - 新功能按模块模式快速开发

2. 全栈类型安全（End-to-End Type Safety）

// 数据库 Schema (Drizzle)
export const blogs = pgTable('blogs', {
  id: uuid('id').defaultRandom().primaryKey(),
  title: varchar('title', { length: 200 }).notNull(),
  // ...
});

// 自动生成 Zod Schema
export const CreateBlogSchema = createInsertSchema(blogs);

// Server Actions 中使用
export async function createBlog(data: unknown) {
  const validated = CreateBlogSchema.parse(data); // 运行时校验
  return await db.insert(blogs).values(validated);
}

// 前端表单中使用相同 Schema
const form = useForm<z.infer<typeof CreateBlogSchema>>({
  resolver: zodResolver(CreateBlogSchema)
});

优势：

• 🎯 单一数据源 - 数据库 Schema 是唯一真相来源
• 🔄 自动类型同步 - 数据库变更自动同步到前端
• 🛡️ 运行时安全 - Zod 提供运行时类型校验
• 🚫 杜绝类型错误 - 编译时和运行时双重保障

3. Server Actions 优先（API-less Architecture）

// 传统方式：需要创建 API 路由
// app/api/blogs/route.ts + 前端 fetch 调用

// AI N8N 方式：直接在组件中调用 Server Actions
async function handleCreateBlog(formData: FormData) {
  const result = await createBlogAction(formData); // 直接调用
  if (result.success) {
    toast.success('博客创建成功');
  }
}

优势：

• ⚡ 开发效率高 - 无需编写 API 路由
• 🔒 天然安全 - 服务端执行，安全边界清晰
• 📱 渐进增强 - 支持无 JavaScript 环境
• 🎭 类型推导 - 完整的类型安全

🚀 快速开始

环境要求

• Node.js 20.x 或更高版本
• pnpm 9.x 或更高版本
• PostgreSQL 数据库（本地或云端）

1. 克隆项目

git clone https://github.com/geallenboy/ai-n8n.git
cd ai-n8n

2. 安装依赖

pnpm install

3. 环境配置

复制环境变量模板：

cp .env.example .env.local

配置关键环境变量：

# 数据库配置
DATABASE_URL="postgresql://user:password@localhost:5432/ai_n8n"

# Clerk 认证 (https://clerk.com)
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="pk_test_..."
CLERK_SECRET_KEY="sk_test_..."

# Stripe 支付 (https://stripe.com)
STRIPE_SECRET_KEY="sk_test_..."
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="pk_test_..."
STRIPE_WEBHOOK_SECRET="whsec_..."

# Cloudflare Images (可选)
CLOUDFLARE_ACCOUNT_ID="your_account_id"
CLOUDFLARE_API_TOKEN="your_api_token"
CLOUDFLARE_ACCOUNT_HASH="your_account_hash"

# OpenRouter AI (可选)
OPENROUTER_API_KEY="sk-or-v1-..."

# 应用配置
NEXT_PUBLIC_SITE_URL="http://localhost:3000"

4. 数据库初始化

# 生成数据库迁移
pnpm db:generate

# 推送 Schema 到数据库
pnpm db:push

# 打开数据库管理界面（可选）
pnpm db:studio

5. 启动开发服务器

pnpm dev

🎉 打开 http://localhost:3000 查看应用

📦 部署指南

Vercel 一键部署（推荐）

1. 点击上方按钮跳转到 Vercel
2. 连接您的 GitHub 账户
3. 配置环境变量
4. 部署完成

手动部署

# 构建生产版本
pnpm build

# 启动生产服务器
pnpm start

🎯 使用场景

1. 📝 内容创作平台

• 技术博客 - 开发者分享技术文章
• 企业官网 - 公司新闻和产品介绍
• 个人品牌 - 个人博客和作品展示

2. 🏢 企业 SaaS

• 知识库 - 内部文档和知识管理
• 客户门户 - 用户帮助中心和教程
• 营销网站 - 产品介绍和案例展示

3. 🛒 内容电商

• 付费内容 - 会员制博客和课程
• 数字资产 - 图片素材和模板销售
• 订阅服务 - 定期内容更新服务

🛠️ 开发指南

添加新功能模块

1. 创建功能目录

mkdir -p src/features/your-feature/{actions,components,hooks,types}

2. 定义数据模型

// src/drizzle/schemas/your-feature.ts
export const yourTable = pgTable('your_table', {
  id: uuid('id').defaultRandom().primaryKey(),
  // 定义字段...
});

3. 创建 Zod Schema

// src/features/your-feature/schemas.ts
export const CreateYourFeatureSchema = createInsertSchema(yourTable);

4. 实现 Server Actions

// src/features/your-feature/actions/index.ts
'use server';
export async function createYourFeature(data: unknown) {
  const validated = CreateYourFeatureSchema.parse(data);
  // 业务逻辑...
}

5. 创建 SWR Hooks

// src/features/your-feature/hooks/index.ts
export function useYourFeature() {
  return useSWR('/api/your-feature', fetcher);
}

自定义配置

// tailwind.config.ts - 自定义主题
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eff6ff',
          // 定义品牌色...
        }
      }
    }
  }
}

📊 项目统计

• 📁 模块数量: 12+ 个功能模块
• 🧩 组件数量: 100+ 个可复用组件
• 📝 代码行数: 15,000+ 行
• 🌐 支持语言: 中文、英文
• 🗄️ 数据表: 15+ 个业务表
• 🔗 API 端点: 20+ 个

🤝 贡献指南

我们欢迎所有形式的贡献！

贡献流程

1. Fork 项目 到您的 GitHub 账户
2. 创建功能分支: git checkout -b feature/amazing-feature
3. 提交代码: git commit -m 'feat: add amazing feature'
4. 推送分支: git push origin feature/amazing-feature
5. 创建 Pull Request

开发规范

• ✅ 遵循 Conventional Commits 提交规范
• ✅ 确保代码通过 ESLint 检查: pnpm lint
• ✅ 添加适当的类型定义和注释
• ✅ 新功能需要编写相应的 Schema 校验

提交类型

feat: 新功能
fix: 修复问题
docs: 文档更新
style: 代码格式调整
refactor: 代码重构
test: 测试相关
chore: 构建/工具相关

📞 社区与支持

• GitHub Issues: 提交问题和建议
• GitHub Discussions: 社区讨论
• Email: [email protected]
• Twitter: @gejialun88

📄 许可证

本项目基于 MIT License 开源协议。

---

⭐ 如果这个项目对您有帮助，请给我们一个 Star！

🌟 Star 项目 • 🍴 Fork 项目 • 📞 联系作者