本文介绍了一个使用 Next.js 15 构建的图像到图像 AI 处理工具，旨在解决现有工具价格昂贵或功能单一的痛点。该工具支持图片与文字描述的结合进行 AI 图像重生成，并提供批量处理（最多 5 张）、实时状态追踪（异步处理与轮询）和积分系统（新用户免费）。技术栈包括 Next.js 15 (App Router)、TypeScript、Tailwind CSS、Drizzle ORM、PostgreSQL、NextAuth 和 Cloudflare R2。文章还分享了开发过程中遇到的 DNS 配置、异步状态管理、积分系统原子性以及 SEO 优化等坑点，并强调了响应式设计、完善的错误处理、Suspense 加载优化和文件操作进度反馈等细节。在成本控制方面，该工具利用 Vercel、Supabase 和 Cloudflare R2 的免费额度，AI 接口按量付费，整体成本可控。目前该工具功能完整，技术现代化，欢迎试用。

🛠️ **功能强大且易用**：该工具的核心在于其强大的图像到图像 AI 处理能力，用户只需上传图片并提供文字描述，AI 即可进行重生成。同时，它支持最多 5 张图片的批量处理，大大提高了效率。异步处理与轮询机制确保了用户能够实时追踪任务进度，而直观的积分系统则为新用户提供了免费体验，降低了使用门槛。

💻 **现代化技术栈与稳定实现**：项目采用了 Next.js 15 (App Router)、TypeScript 和 Tailwind CSS 构建前端，保证了界面的响应式和良好的用户体验；后端则利用 Next.js API Routes、Drizzle ORM 和 PostgreSQL 实现，并集成了 NextAuth (Google/GitHub 登录) 和 Cloudflare R2 进行文件存储。这种技术组合确保了项目的可扩展性和稳定性。

💡 **细节打磨与成本优化**：开发团队在细节上精益求精，包括响应式设计以优化移动端体验、完善的错误处理机制（如失败自动退还积分）、使用 Suspense 优化加载体验，以及对所有文件操作提供进度和状态反馈。在成本控制方面，通过利用 Vercel、Supabase 和 Cloudflare R2 的免费额度，并采用按量付费的 AI 接口，有效降低了运营成本，使得该工具在功能丰富的同时，价格上也更具竞争力。

项目背景

最近用 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 + PostgreSQLNextAuth (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 ，有问题或建议随时交流。