我看过这个模式重复出现过十多次。一个 Webflow 代理机构赢得了一个很棒的客户，完成了营销网站的工作，然后听到那句让他们心里一沉的话："你们能不能也给我们建一个客户门户？"或者是一个产品仪表板。或者一个带有真实库存的认证电商体验。突然之间，无代码的魔法就失效了。

那些想清楚后续怎么做的代理机构，正在为他们的营收增加每年 20 万美元或更多。那些没想清楚的呢？他们在转介这些工作——眼睁睁地看着别人掌握了客户关系。

我将详细讲解 Webflow 代理机构如何与 Next.js 开发者合作、真正可行的白标模式、营收增长背后的数学，以及如何构建这些合作关系使双方都能赢。这不是理论——它基于与代理机构所有者的对话，以及我们在 Social Animal 过去几年建立的合作关系。

目录

Webflow 代理机构增长问题

Webflow 确实令人印象深刻。2025 年有 60 多万个实时网站，2023 年实现了 50% 的同比收入增长，达到 2 亿美元，根据 Forrester 研究的投资回报率为 332%。与传统开发相比，该平台的页面发布速度快 94%。这些数字都是真实的，它们创造了一个完整的代理机构生态，专门构建美观、高性能的营销网站。

但这里有一个在 Webflow Conf 上没人谈论的事情：仅靠 Webflow 构建的收费有一个硬顶。

大多数 Webflow 代理机构项目的范围在 1 万美元至 5 万美元之间。这是可靠的工作，但当您试图扩展时，数学就变得残酷了。您需要不断的新客户管道，您的团队总是在项目之间快速转换上下文，一旦客户需要超出 Webflow 本地功能的东西——自定义身份验证、复杂数据处理、实时功能、多租户架构——您就陷入了困境。

我看到在 2025-2026 年增长最快的代理机构已经搞清楚了一个简单的事实：最有利可图的工作发生在 Webflow 能力的边界上。

这个边界就是 Next.js 介入的地方。

为什么 Next.js 是自然的扩展

我不会假装 Next.js 是这里的唯一选择。但对于 Webflow 代理机构来说，它是最自然的选择，原因如下。

Webflow 本质上是一个带有 CMS 的可视化前端构建器。Next.js 是一个基于 React 的框架，具有服务器端渲染、静态站点生成、API 路由和中间件。它们是互补的，而不是竞争的。

这样想吧：

功能 Webflow 本地 Webflow + Next.js
营销页面 ✅ 优秀 ✅ 优秀
博客/内容 CMS ✅ 良好 ✅ 很好（无头）
用户身份验证 ❌ 有限 ✅ 完全控制
动态仪表板 ❌ 不可能 ✅ 完全控制
电商（复杂） ⚠️ 基础 ✅ 自定义逻辑
API 集成 ⚠️ 通过 Zapier/Make ✅ 原生 API 路由
实时功能 ❌ 否 ✅ WebSockets、SSE
多语言（i18n） ⚠️ 变通方法 ✅ 内置支持
性能（Core Web Vitals） ✅ 良好 ✅ ISR 时优秀
AI/LLM 发现的 SEO ⚠️ 受限的结构化数据 ✅ 完全控制

当 Webflow 客户需要右列中的东西时，能够交付它的代理机构保留了客户。不能交付的代理机构失去了他们，他们被转向全服务店。

像 Finsweet 和 BRIX 这样的代理机构已经搞清楚了，用自定义逻辑和技术深度扩展 Webflow。但大多数代理机构的员工中没有 React 开发者——也不应该有。这就是合作关系发挥作用的地方。

营收数学：20 万美元每年是如何实现的

让我走过实际数字，因为"每年增加 20 万美元"听起来像是点击诱饵承诺，除非我展示这项工作。

这是一个 Webflow 代理机构的保守模型，该机构开始通过开发合作伙伴提供 Next.js 驱动的服务：

场景：向现有客户追加销售

假设您每年有 30 个活跃的 Webflow 客户（对于 5-10 人的代理机构来说很标准）。其中：

  • 20%（6 个客户）需要超出 Webflow 本地功能的东西
  • 平均 Next.js 附加项目价值：2.5 万美元至 4.5 万美元
  • 您在支付开发合作伙伴后的利润：40-50%

让我们保守一点：

6 个项目 × 3.5 万美元平均 = 21 万美元总营收
21 万美元 × 45% 利润 = 9.45 万美元利润

这是从您之前转介出去的工作中获得的近 10 万美元纯利润。

场景：赢得更大的客户

这就变得有趣了。您的名册上有 Next.js 功能，现在您可以向本来会拒绝纯 Webflow 代理机构的客户宣传：

  • SaaS 公司需要营销网站和应用式体验
  • FinTech 公司需要符合 FCA 的门户以及他们的公共网站
  • 电商品牌需要自定义产品配置器或帐户区域

这些项目的起价为 5 万美元至 15 万美元。每年在现有工作基础上再获得 2-3 个这样的项目会让您轻松超过 20 万美元的额外营收。

场景：保留金收入

一旦您为客户构建了 Next.js 驱动的功能，他们就需要持续维护。Webflow + Next.js 混合网站的典型保留金为 2000-5000 美元/月。六个客户以每月 3000 美元的保留金另外获得 21.6 万美元/年——保留金收入是最有价值的。

真正可行的白标合作模式

并非所有的合作关系都是平等的。我看到三种模式在实践中起作用，每一种都有不同的权衡。

模式 1：基于项目的白标

您将项目出售给您的客户，然后将 Next.js 开发工作外包给您的合作伙伴。客户永远不会知道另一个团队参与其中。

优点：

  • 简单易行
  • 无需持续承诺
  • 您完全控制客户关系

缺点：

  • 每个项目的协调开销更高
  • 您负责范围管理
  • 质量取决于合作伙伴评估

**最适合：**刚开始提供开发服务的代理机构。

模式 2：嵌入式团队扩展

您的开发合作伙伴提供专门的开发人员，他们作为您团队的一部分工作——使用您的 Slack、参加您的站立会议、在您的品牌中亮相。

优点：

  • 感觉像拥有内部开发人员，但没有开销
  • 更好的沟通和背景
  • 随需求放大/缩小

缺点：

  • 更高的月度承诺
  • 需要流程对齐
  • 合作伙伴需要匹配您的文化

**最适合：**具有一致开发需求的代理机构（每季度 3+ 个项目）。

模式 3：混合收入分享

您和您的开发合作伙伴共同销售和交付，根据贡献分割收入。客户可能知道两方都存在。

优点：

  • 分担风险和销售努力
  • 获取您合作伙伴网络中的新商机
  • 低前期成本

缺点：

  • 对客户关系的控制较少
  • 需要清晰的责任协议
  • 没有良好的合同可能会变得混乱

**最适合：**与知名开发工作室合作的代理机构。

在 Social Animal，我们与代理合作伙伴运营过所有三种模式。对于年收入 50 万美元以上的代理机构，嵌入式团队扩展往往能产生最好的结果，而基于项目的模式对于测试这片水域的较小商店来说效果很好。

技术整合：Webflow 和 Next.js 如何协作

让我深入了解技术细节，因为这是很多代理机构对实际可能的事情感到困惑的地方。

架构 1：Webflow CMS 作为无头后端

Webflow 的 CMS API 让您将内容拉入 Next.js 前端。您的营销团队在 Webflow 的可视化编辑器中保持编辑内容，但实际渲染通过 Next.js 发生。

// 在 Next.js 中获取 Webflow CMS 集合
export async function getStaticProps() {
  const res = await fetch(
    'https://api.webflow.com/v2/collections/{collection_id}/items',
    {
      headers: {
        'Authorization': `Bearer ${process.env.WEBFLOW_API_TOKEN}`,
        'accept': 'application/json',
      },
    }
  );
  const data = await res.json();

  return {
    props: { items: data.items },
    revalidate: 60, // ISR：每 60 秒重新构建一次
  };
}

这种方法提供了 Webflow 的编辑体验与 Next.js 的渲染能力。ISR（增量静态再生）意味着您的页面非常快速，但总是新鲜的。

架构 2：Webflow 用于营销，Next.js 用于应用

更常见的模式。您客户的营销网站保留在 Webflow 中（它在这方面很出色），Next.js 处理认证/动态部分：

  • www.client.com → Webflow（营销页面、博客、登陆页面）
  • app.client.com → Next.js（仪表板、门户、帐户区域）
  • 共享设计系统确保视觉一致性

这是 headless CMS development 方法真正闪耀的地方。您不是在平台之间选择——您是在使用每个平台最强大的地方。

架构 3：具有 Webflow 设计 DNA 的完整 Next.js

一些代理机构导出他们的 Webflow 设计并在 Next.js 中重建它们，使用 Devlink 等工具或手动转换设计系统。当以下情况时这很有意义：

  • 整个网站需要 SSR/SSG 以获得性能
  • 您需要对结构化数据进行细粒度控制，以实现 AI/LLM 发现
  • 客户的网站具有高度动态的个性化

我们的 Next.js development 团队已经处理过所有三种架构。正确的选择取决于客户的具体需求，而不是一个通用的哲学。

寻找和评估 Next.js 开发合作伙伴

这是代理机构最常出问题的地方。他们在 Upwork 上找到某个人，在第一个项目上被坑，然后决定合作关系不起作用。以下是如何实际评估一个合作伙伴。

寻找什么

  1. 生产环境 Next.js 经验——不仅仅是教程。要求他们展示他们构建的实时网站。检查他们的 Lighthouse 分数。
  2. Webflow 熟悉度——他们需要理解 Webflow 的 CMS 数据模型和 API 怪癖。如果他们在您提到 CMS 集合时茫然若失，继续寻找。
  3. 沟通频率——白标工作需要紧密沟通。您的合作伙伴需要主动更新您，而不是等您询问。
  4. 设计敏感性——交付像素完美工作的开发人员很少见。与您的设计团队验证。
  5. 流程文档——他们如何处理范围变化？质量保证？部署？如果他们不能阐明这一点，他们就会临时应对。

红旗

  • 他们从未与非技术客户合作过（您将成为翻译——这需要有效）
  • 无 TypeScript 经验（在 2025 年，这对于可维护的代码是不可协商的）
  • 他们无法解释他们的托管/部署建议
  • 对项目交接或文档没有结构化方法

试点项目

始终从一个小项目开始。一个交互式组件、带有动态数据的登陆页面或客户功能的概念证明。为此试点预算 3000-5000 美元。这是您将进行的最便宜的尽职调查。

2025-2026 年的实际定价基准

根据我们看到和定价的项目，现在的市场看起来像这样：

项目类型 客户价格范围 开发合作伙伴成本 您的利润
自定义交互式组件 5K-15K 2K-7K 45-55%
认证门户/仪表板 25K-75K 12K-35K 45-55%
完整混合站点（Webflow + Next.js） 40K-120K 20K-55K 45-55%
具有自定义逻辑的电商 35K-80K 15K-40K 45-55%
持续保留金（月度） 3K-8K/月 1.5K-4K/月 50%

那 45-55% 的利润是白标开发的典型。您提供了客户关系、项目管理、设计方向和质量保证。这价值很高。

对于有兴趣探索这些合作关系在实践中如何运作的代理机构，我们的 pricing page 详细说明了我们如何构建合作。或者直接 联系我们——我们很乐意讨论这个模型。

常见陷阱及避免方法

陷阱 1：在能够交付之前销售

在您的合作关系经过测试之前，不要向客户承诺 Next.js 功能。我看到代理机构签署 8 万美元的合同，然后匆忙寻找开发人员。这是灾难的配方。

**修复：**在向客户销售之前，至少完成一个与您的开发合作伙伴的试点项目。

陷阱 2：范围期望不一致

您的客户告诉您他们想要"一个简单的登录页面。"您告诉您的开发合作伙伴"构建一个登录页面。"他们构建了一个基础认证表单。客户实际上想要带有 Google SSO、基于角色的访问控制和密码恢复流的登录。

**修复：**您的开发合作伙伴应该参与范围界定过程，即使客户不知道他们存在。让他们在您报价之前审查需求并标记复杂性。

陷阱 3：没有共享设计系统

Webflow 营销网站看起来很漂亮。Next.js 门户看起来...不同。客户注意到了。

**修复：**从您的 Webflow 设计令牌（颜色、排版、间距、组件）中提取到共享系统中。您的开发合作伙伴应该在 React 中将这些实现为组件库。这也是 Astro development 对于需要最大性能的内容丰富混合站点很有趣的地方。

陷阱 4：忽视发布后支持

您启动混合网站，相互祝贺，然后...谁处理错误报告？谁部署破坏 Next.js 集成的 CMS 变化？

**修复：**在项目开始前与您的开发合作伙伴定义支持 SLA。将其包含在您客户的保留金定价中。

陷阱 5：试图自己学习 Next.js

我看到代理机构创始人花了六个月时间试图学习 React 和 Next.js，这样他们就可以"自己做"。那是六个月他们不花在销售、设计和客户关系上——这些是真正让他们的代理机构赚钱的东西。

**修复：**专注于您擅长的东西。为其余的与专家合作。那不是弱点。这是每个成功的代理机构如何扩展的。

常见问题

Webflow 代理机构通过合作伙伴开始提供 Next.js 服务需要花费多少？ 您的初始投资主要是寻找和评估合作伙伴。为试点项目预算 3000-5000 美元，加上 10-15 小时的时间进行合作伙伴评估和流程对齐。没有许可成本——Next.js 是开源的。大多数代理机构在第一个或第二个客户项目中看到积极的投资回报率。

Webflow 和 Next.js 能实际在同一个项目上协作吗？ 绝对可以。最常见的模式是使用 Webflow 处理营销页面和 CMS 内容，而 Next.js 处理认证体验、动态功能或性能关键页面。Webflow 的 CMS API 允许 Next.js 直接拉取内容，子域路由让您从统一的域提供两者。这是一个经过验证的架构，被数百个生产网站使用。

哪些类型的客户项目最受益于 Webflow + Next.js 混合方法？ B2B SaaS 公司需要营销网站和应用式客户门户。FinTech 公司需要符合规定的认证体验。具有复杂产品配置器或账户管理的电商品牌。任何超出 Webflow 本地功能但热爱营销内容的编辑体验的客户。

我如何向非技术客户解释这种混合方法？ 保持简单："我们为网站的每个部分使用最好的工具。您的营销页面使用您的团队可以直接编辑的可视化平台。您的[门户/仪表板/应用]使用自定义开发来获得需要它的功能。两者对您的访问者看起来和感觉都相同。"客户不关心技术——他们关心结果。

从"探索想法"到"交付他们的第一个混合项目"，Webflow 代理机构通常需要多长时间才能开始从 Next.js 合作中产生收入？ 大多数代理机构可以在 8-12 周内从"探索想法"发展到"交付他们的第一个混合项目"。这包括合作伙伴评估（2-3 周）、试点项目（3-4 周）和获取与范围界定他们的第一个真实客户参与（3-5 周）。该项目的收入通常在开始该过程后 4-5 个月内到达。

我是应该在内部聘请 Next.js 开发人员，还是应该合作？ 取决于您的工作量。美国高级 Next.js 开发人员的成本为 12 万美元至 18 万美元/年（工资加福利），或远程强大的聘用为 6 万美元至 9 万美元。如果您有 3+ 个并发项目的一致需求，这是有意义的。对于大多数刚开始的 Webflow 代理机构，合作伙伴模式消除了固定成本风险，让您随需求放大或缩小。一旦您验证了收入流，您总是可以以后在内部引入人员。

Webflow 代理机构在白标 Next.js 工作上能期望什么利润？ 健康的合作关系为代理机构产生 40-55% 的总利润。您提供项目管理、客户沟通、设计方向、质量保证和客户关系本身。一些代理机构通过在内部做更多的设计到代码的交接工作来推动更高的利润。关键是与您的合作伙伴保持透明——他们应该知道您的客户费率，您应该知道他们的成本。

当白标开发工作时，Webflow 代理机构如何保持质量？ 三件事：一个带有文档化令牌和组件的共享设计系统、一个结构化的质量保证流程，您的团队在客户看到之前审查每个部署、以及定期同步会议（活跃项目期间至少每周两次）。与白标质量作斗争的代理机构通常是那些在一侧扔一个 Figma 文件并希望最好的结果的代理机构。留在流程中而不微管理代码。