项目背景
最近用 Next.js 15 搭了一个图像到图像的 AI 处理工具，主要解决现有工具要么太贵，要么功能单一的问题。
项目地址： https://aiimagetoimage.net
核心功能
- 图像到图像转换：上传图片 + 文字描述，AI 帮你重新生成
- 批量处理：最多同时上传 5 张图片
- 实时状态追踪：异步处理 + 轮询机制，有进度反馈
- 积分系统：新用户送免费积分，用完再考虑付费
技术实现
前端
- Next.js 15 (App Router) + TypeScript + Tailwind CSS
- 拖拽上传，支持 JPEG/PNG/WebP ，单文件最大 24MB
- 智能轮播：未登录用户看示例，登录用户看历史记录
后端
- Next.js API Routes + Drizzle ORM + PostgreSQL
- NextAuth (Google/GitHub 登录)
- Cloudflare R2 做文件存储
核心流程
- 图片上传 → R2 存储获取公网 URL
- 调用 API 开始异步处理
- taskId 轮询机制检查状态
- 完成后展示前后对比图
- 一键下载结果
踩过的坑
- DNS 配置：Dynadot + Cloudflare NS 花了半天时间调试
- 异步状态管理：轮询过程中要处理网络中断、超时等边界情况
- 积分系统：确保扣除和退还的原子性操作
- SEO 优化：修复了 Google Search Console 的结构化数据重复问题
值得一提的细节
- 响应式设计，移动端体验不错
- 错误处理比较完善，失败会自动退还积分
- 用了 Suspense 做 loading 优化
- 所有文件操作都有进度和状态反馈
成本控制
- 前端托管：Vercel (免费)
- 数据库：Supabase (免费额度)
- 文件存储：Cloudflare R2 (几乎免费)
- AI 接口：按量付费，成本可控
目前日活不高，但功能比较完整，技术栈也算现代化。
欢迎大家试用 https://aiimagetoimage.net ，有问题或建议随时交流。