我如何使用 Next.js、Supabase 和 Claude AI 构建了一个 5000 页的程序化 SEO 引擎

Source: Dev.to

架构

技术栈非常简洁：

• 前端: Next.js 16 + App Router
• 数据库: Supabase（PostgreSQL）
• 自动化: Make.com 用于数据流水线
• AI: Claude API 用于内容生成

站点提供五种语言（NL、EN、DE、FR、ES），涵盖三类页面：

1. 航班详情页
2. 机场枢纽页
3. 航空公司概览页

数据流水线

Make.com 场景每八小时运行一次，执行以下步骤：

1. 从 AviationStack API 拉取延误和取消的航班数据。
2. 为每条记录补充机场信息、OpenWeather 的天气数据，以及用于赔偿金额的大圆距离计算。
3. 调用 Claude API 生成荷兰语分析报告，包含徽章、摘要和乘客提示。
4. 使用确定性的 slug 规则 flight_iata-dep-arr-date 将丰富后的记录 upsert 到 Supabase。

页面生成

Next.js 动态路由配合 ISR（增量静态再生）进行渲染。

• 每个航班页面位于 /[locale]/vlucht/[slug]。
• 在请求时从 Supabase 获取数据，并设定 一小时 的重新验证窗口。
• 新航班会自动出现，无需重新构建，页面在边缘节点缓存，实现快速交付。

slug 策略将航班号、航线和日期编码进去（例如 kl1234-ams-lhr-2026-02-15），使每个 URL 都唯一且富含关键词。Google 能解析 slug，准确了解页面内容。

多语言 SEO

• 使用基于 locale 的路由生成五种语言的页面。
• 不同语言的路径结构不同（/nl/vlucht/ 与 /en/flight/），以匹配本地搜索习惯。
• hreflang 标签关联语言变体。
• 动态站点地图列出所有已发布航班的所有语言版本——目前约 5,700 条 URL，来源于 1,134 条航班。

内部链接策略

• 每个机场页面链接到其最近的航班。
• 每个航空公司页面展示该运营商的航班。
• 每页底部的页脚包含指向机场、航空公司以及最近取消航班的交叉链接。

这形成了一个密集的内部链接图谱，帮助 Google 从少数入口点发现并抓取所有页面。

经验教训

• 抓取: 在新域名上进行程序化 SEO 是一场耐心的游戏。没有任何外部链接时，Google 需要数周才能抓取到首页之外的页面，即使已经提交完整的站点地图。外部 backlink 对启动抓取至关重要。
• AI 约束: Claude 能生成优秀的荷兰语摘要，但要实现一致的徽章分配和合适的语气，需要多轮提示工程。
• ISR 缓存: 页面只有在有人访问时才会更新，这会导致机场页面出现陈旧数据。使用基于 cron 的缓存预热脚本可以解决此问题。

结果

FlyClaim.AI 现在能够自动生成 超过 5,000 页，每页针对特定的延误或取消航班，提供五种语言的独特 AI 编写内容。整个系统运行在 Vercel 免费层、Supabase 免费层以及 Make.com 入门计划上。

如果你对程序化 SEO 或使用 AI 构建内容引擎感兴趣，欢迎在评论区提问。

快去看看吧：