用 Codex 从零上线一个 AI Newsletter 产品：3 天全链路实战

很多人用 AI 编程工具，还停留在“让模型写几段代码”的阶段。但 AI 编程的真正价值，是把一个想法一路推进成真实可用的产品。这篇教程用一个完整的 Newsletter 产品（用户留邮箱、每天收到 AI 资讯邮件）作为项目，带你走完从页面到产品的全链路。整个项目分 5 个课时、共约 66 分钟，下面按实操顺序拆解。

第一步：从想法到产品蓝图

先别急着写代码。把 Newsletter 产品的最小闭环拆出来：首页（展示产品价值）→ 订阅（用户输入邮箱）→ 每日内容（自动生成并发送邮件）。这三件事就是 MVP 的全部。

上线需要的关键能力清单：

• 一个可访问的网页（首页 + 订阅表单）
• 能存用户邮箱的数据库
• 能发邮件的服务（含发信域名验证）
• 定时任务（每天生成内容并推送）

把这四件事想清楚，后面每一步都围绕它们展开。不要一开始就追求完美设计或复杂功能，先把闭环跑通。

第二步：工程化迁移到 Next.js

如果你用 AI 设计工具（比如 v0、Figma 转代码）生成了 HTML/CSS/JS 页面，下一步不是重新设计，而是工程化迁移。把静态页面整理成 Next.js 项目结构，组件化拆分，样式统一管理。

实操要点：

• 把页面拆成 components/ 下的独立组件（如 Header、SubscribeForm、ArticleCard）
• 用 Next.js 的 App Router 或 Pages Router 组织路由
• 把样式文件整理进全局 CSS 或 CSS Modules

迁移完成后，推到 GitHub 远程仓库，然后部署到 Vercel。Vercel 会自动识别 Next.js 项目，连接仓库后一键部署。这一步做完，你就有了一个公网可访问的页面。

第三步：域名、数据库与项目记忆

自定义域名

在 Vercel 项目设置里添加自定义域名，去域名服务商（如 Namecheap、阿里云）解析一条 CNAME 记录到 Vercel 提供的地址。等 DNS 生效后，就可以用你自己的域名访问了。

接入 Supabase 存订阅邮箱

Supabase 是开源的 Firebase 替代品，免费套餐够用。创建项目后，建一张 subscribers 表，字段至少包含 email 和 created_at。然后写一个订阅 API 路由（/api/subscribe），接收 POST 请求，把邮箱写入数据库。

维护 AGENTS.md 让 Codex 保持上下文

在项目根目录创建 AGENTS.md 文件，记录项目的技术栈、目录结构、常用命令、环境变量说明。这样 Codex 在长期项目中每次对话都能快速恢复上下文，不用重复解释项目背景。

第四步：邮件系统接入与排错

邮件是 Newsletter 产品的核心。以阿里云 DirectMail 为例，接入流程如下：

1. 在阿里云开通 DirectMail，添加发信域名
2. 按提示配置 DNS 记录：DKIM、SPF、DMARC、MX
3. 等待验证通过（通常几分钟到几小时）
4. 在本地配置文件（如 .env.local）填写 AccessKey ID 和 Secret，注意：不要在对话里明文发送 API Key，只放在本地配置文件

订阅成功后，调用邮件 API 自动发送欢迎邮件。如果线上收不到邮件，按这个顺序排查：

• 先看 Vercel 的日志，确认 API 是否被调用、有无报错
• 检查发信域名的验证状态（DKIM/SPF 是否通过）
• 检查邮件是否进了垃圾箱

一个常见 bug：邮件模板用 Markdown 写的，但发送时没有渲染成 HTML。解决办法是在发送前把 Markdown 转成 HTML（用 marked 或 react-markdown）。

第五步：从 MVP 到可运营产品

MVP 跑通后，逐步补齐运营能力：

• 每日内容自动生成：用定时任务（Vercel Cron 或 GitHub Actions）每天触发一次，调用 AI 生成当天资讯，做质量检查（长度、关键词、敏感词）
• 配图：生成图片失败或遇到 429 限流时，做重试或降级（比如先用默认图）
• 内容归档：把每天的邮件内容存到 Supabase Storage，方便回溯
• 支付：最短路径是用现成的打赏/收款模块（比如 Xorpay 的“请我喝咖啡”），先跑通闭环，再考虑自建支付。价格和套餐以官方页面为准
• 作者卡片、管理员后台、SEO、Logo：这些属于打磨项，按需逐步添加

关键经验总结

完整上线链路口诀：想法 → 页面 → Next.js 工程化 → GitHub → Vercel → 域名 → 数据库 → 邮件/通知 → 定时任务 → 支付 → 后台。

几个容易踩的坑：

• 环境变量要分本地/线上两套管理（.env.local 和 Vercel 的 Environment Variables）
• 线上排错先看日志，再看发信域名验证状态
• 支付别一上来就自建，先用现成模块跑通

这套流程适合已学完 Codex/Claude Code 基础、想做副业产品/工具站/内容站的人。3 天时间，足够把一个想法变成能收邮件、能发邮件、能收钱的产品。

(文中案例与数字均为来源材料中提及，未经独立核实。)

系列：AI 实操