DEV Community

Mallozzi Lipsitz
Mallozzi Lipsitz

Posted on

我如何用 Next.js + Cloudflare Pages 在 48 小时内构建并上线一个 AI 图片背景去除工具

#ai #nextjs #showdev #sideprojects

大家好！我想分享一下我最近的一个副业项目 —— 一个免费的在线 AI 图片背景去除工具。
项目背景
有一天我需要处理一些图片，发现市面上的工具要么收费太贵，要么需要注册很麻烦。于是我想：为什么不自己做一个？
技术选型
前端框架：Next.js 15
• 原因：React 生态成熟，App Router 用起来很爽
• 部署：直接部署到 Cloudflare Pages，速度快，免费额度够用
后端：Cloudflare Workers + D1
• Workers：轻量级 Serverless，处理图片上传
• D1：SQLite 数据库，存储用户信息和积分
• 优势：和 Pages 无缝集成，边缘计算速度快
AI 能力
这里就不展开说了，核心是找一个好用的背景去除 API。
功能特性
✅ 1 秒去除背景 - 快速响应
✅ 无需注册 - 直接使用，降低门槛
✅ 免费额度 - 新用户送积分
✅ 付费升级 - 支持订阅和按量付费
✅ 响应式设计 - 手机电脑都能用
开发过程
第 1 天：MVP 版本
• 搭建 Next.js 项目
• 集成背景去除 API
• 实现基础的上传和预览功能
第 2 天：完善和部署
• 添加用户系统（NextAuth）
• 实现积分和支付系统
• 部署到 Cloudflare Pages
• 配置域名和 SSL
部署到 Cloudflare Pages 的经验
为什么选 Cloudflare Pages？

  1. 免费额度大 - 100,000 次请求/月
  2. 全球 CDN - 访问速度快
  3. 自动 HTTPS - 不用自己配置证书
  4. GitHub 集成 - 推送自动部署 部署步骤
  5. 连接 GitHub 仓库
  6. 配置构建命令：npm run build
  7. 配置输出目录：.next（Next.js 自动处理）
  8. 一键部署！ 冷启动策略 现在项目刚上线，正在尝试各种推广渠道：

✅ SEO - 配置了完整的 meta 标签和站点地图
✅ Google Analytics - 监控数据
⏳ ProductHunt - 准备发布
⏳ Reddit - r/sideproject, r/design
⏳ Twitter - 发演示视频
项目链接
🔗 在线试用：https://image-background-remover.space
📝 欢迎反馈：有任何问题或建议，欢迎告诉我！
总结
从想法到上线，只用了 48 小时。Cloudflare 的整套工具链让部署变得非常简单，Next.js 让开发效率很高。

如果你也在做副业项目，我的建议是：先上线，再完善。不要追求完美，先把 MVP 做出来，根据用户反馈再迭代。

感谢阅读！如果你觉得这个项目有用，欢迎去试试，也欢迎分享你的想法！

Top comments (0)