将 Webflow 迁移到 Next.js | 完整技术迁移

为什么离开 Webflow

Webflow 帮你成功上线了。它处理了你的前 20 个页面、你的博客，甚至一些门控内容。但现在你遇到了瓶颈。

你的 CMS 集合有 8,000 个项目，眼看就要撞上 10,000 的上限。你的托管费用在添加团队座位和 CMS 计划后，已经超过每月 $200。你的开发人员无法使用 Git，无法编写测试，无法通过适当的 CI/CD 管道部署。每个自定义交互都需要用胶带粘合的嵌入脚本。

生成的 HTML 很臃肿。移动端的 Lighthouse 得分在 45 到 65 之间。你的 TTFB 徘徊在 1.5 秒左右，因为 Webflow 的 CDN 没有针对动态内容进行优化。一旦你需要身份验证、用户仪表板或任何真正的后端逻辑，你就在拼凑第三方服务，没有任何有凝聚力的架构。

这不是对 Webflow 的否定。这是对你的网站已经超出其能力范围的认可。

Next.js + Supabase + Vercel 能给你什么

迁移目标不仅仅是"一个 React 应用"。它是建立在三个支柱上的生产级架构：

Next.js 作为前端运行时

Next.js 开箱即用地为你提供服务器端渲染、静态生成、增量静态再生成、API 路由、中间件和图像优化。每个页面都以优化的 HTML 形式交付。客户端 JavaScript 仅在需要时加载。你可以完全控制每个页面的路由、数据获取策略和渲染模式。

Supabase 作为你的无头 CMS 和后端

我们不让你支付 $40/月的无头 CMS 和团队需要学习的另一个仪表板，而是使用 Supabase。你可以获得 Postgres 数据库，其 REST API 从你的架构自动生成，实时订阅、媒体文件存储和任何身份验证功能的行级安全性。你的内容编辑器会获得一个根据你的确切内容模型构建的自定义管理界面——没有字段限制、没有按项目定价、没有集合上限。

对于偏好传统 CMS 编辑体验的团队，我们可以在 Supabase 的 Postgres 实例上添加 Directus 或 Payload CMS。两全其美。

Vercel 用于部署

每次推送到 main 都会触发生产部署。每个拉取请求都获得一个预览 URL。Edge 函数处理中间件。全球 CDN 在全球范围内提供低于 300 毫秒的 TTFB。你为使用付费——对于大多数营销网站，Pro 计划上接近 $0。

我们的迁移流程

我们已经迁移了数十个 Webflow 网站到 Next.js。以下是我们的确切做法。

第 1 阶段：审计和架构（第 1 周）

我们爬取你的 Webflow 网站并建立完整的清单：每个页面、每个 CMS 集合、每个表单、每个自定义脚本、每个第三方集成。我们映射你的当前 URL 结构、记录你的元数据并截图每个独特的布局。

交付物：网站地图、组件清单、URL 重定向映射、CMS 架构设计、集成检查清单和带有固定价格的作用域提案。

第 2 阶段：CMS 和数据迁移（第 2 周）

我们通过 Webflow API 将所有 Webflow CMS 内容导出为结构化 JSON。博客文章、案例研究、团队成员、推荐——一切都会被清理、转换并导入 Supabase，具有适当的关系架构。媒体文件会移动到 Supabase Storage 或 Cloudflare R2，URL 为重定向处理而映射。

富文本内容从 Webflow 的专有格式转换为可移植的 markdown 或结构化 JSON。不会丢失任何格式。

第 3 阶段：组件构建（第 2-4 周）

每个 Webflow 部分都变成一个类型化的 React 组件。我们使用 Tailwind CSS 进行样式设计，并逐像素匹配你现有的设计——除非你选择了重新设计。组件以可组合的模式构建，因此你的团队可以在不涉及代码的情况下组装新页面。

Webflow 交互和动画使用 Framer Motion 重建。自定义嵌入和脚本被替换为适当的 React 集成。表单通过 Next.js API 路由直接连接到你的 CRM，而不是脆弱的 Zapier 链。

第 4 阶段：集成重新连接（第 4 周）

HubSpot、Google Analytics 4、Google Tag Manager、Intercom、LinkedIn Insight、Meta Pixel、cookie 同意——每个集成都会被重新连接并验证。我们构建一个 QA 矩阵并在页面类型、用户流和同意状态之间测试每个集成是否正确触发。

第 5 阶段：SEO 保留和 301 重定向（第 4-5 周）

这是迁移成功或失败的地方。

SEO 保留策略

我们将 SEO 保留视为一流的工程关切，而不是事后想法。

301 重定向映射

每个 Webflow URL 都获得在 next.config.js 中配置的相应 301 重定向。这包括：

• 所有页面路由（包括 /blog/slug 模式）
• 具有动态 slug 的 CMS 集合页面
• Webflow 自动生成的分页 URL
• Webflow 中已配置的任何遗留重定向
• 如果你更改 CDN 提供商，则为图像 URL

我们通过爬取你的实时 Webflow 网站并确认每个 URL 在新的 Next.js 构建上解析为 200 来以编程方式验证重定向映射。

元数据奇偶性

每个页面的标题标签、元描述、规范 URL、Open Graph 标签和结构化数据 (JSON-LD) 都完全迁移。我们在启动前在每个索引 URL 中对新旧元数据进行差异化。

网站地图和 Robots.txt

Next.js 从你的 Supabase 内容生成动态 XML 网站地图。我们在 DNS 切换后立即将其提交到 Google Search Console，并在两周内监视索引。

性能作为 SEO 信号

从 Webflow 的 45-65 移动 Lighthouse 得分迁移到 95-100 不仅仅是虚荣。Core Web Vitals 是排名因素。更快的 TTFB、更小的 bundle 和优化的图像直接改善你的搜索可见性。

分阶段切换

对于高流量网站，我们进行分阶段迁移。博客部分首先上线——我们观察一周的排名，确认没有下降，然后迁移其余部分。如果出了问题，这会限制影响范围。

时间表和定价

时间表取决于网站复杂性：

• 营销网站（最多 15 个页面 + 博客）： 3-4 周，起价 $4,900
• 复杂网站（15-50 个页面 + 多个 CMS 集合 + 集成）： 5-7 周，起价 $9,800
• Web 应用程序（身份验证、仪表板、API 逻辑）： 8-12 周，起价 $18,000

每个项目都从免费迁移审计开始。我们审查你的 Webflow 网站，识别技术债务，映射架构，并交付固定价格提案。没有按小时计费的惊喜。

启动后会发生什么

你拥有一切。代码库位于你的 GitHub 仓库中。数据库在你的 Supabase 项目中。部署在你的 Vercel 帐户上运行。如果你想在六个月后将开发引入内部，你可以——没有供应商锁定、没有专有格式、没有导出费用。

我们为持续开发提供可选的保留程序包，但该架构设计使你的团队可以在不需要我们帮助的情况下进行内容更新、新页面和小改动。