真實成本：Webflow vs Next.js + Supabase + Vercel 2025 年對比
我在這個柵欄兩邊都建過項目。在 Webflow 上建立行銷網站，其中客戶需要東西立即上線，還有在 Next.js + Supabase + Vercel 上建立複雜應用，其中我們需要即時資料、身份驗證，以及視覺構建器無法觸及的靈活性。我最常被問到的問題不是「哪個更好？」——而是「哪個在接下來的 12 個月內實際上會花我最少的錢？」那個答案比任何定價頁面都要複雜得多。
讓我們深入了解真實數字。不是「起價」行銷數字，而是當你考慮團隊席位、帶寬超額、第三方整合和沒人談論的開發人員時間時，你實際上要支付的費用。
目錄
- 為什麼這個比較在現在很重要
- Webflow 定價：你實際上要支付的費用
- Next.js + Supabase + Vercel：堆疊定價分解
- 按場景的面對面成本比較
- 沒人會在定價頁面上放的隱藏成本
- 互動成本框架：建立你自己的估計
- Webflow 何時在財務上有意義
- Next.js 堆疊何時在成本上獲勝
- 混合方法：兩全其美
- 常見問題
為什麼這個比較在現在很重要
Webflow 一直在穩步提高價格。他們的工作區計畫在 2024 年末進行了重組，而企業定價——已經很不透明——已經上升到讓 CTO 皺眉的水準。同時，Vercel 的按座位定價模型（Pro 上每個開發人員 $20/月）加上基於使用量的超額已經讓不少團隊在部落格文章爆紅時大吃一驚。
緊張局勢是真實的：Webflow 承諾無代碼快速上市。Next.js + Supabase + Vercel 堆疊承諾無限靈活性和潛在較低的基礎設施成本。但「潛在」在那句話中承載了許多重量。
我見過團隊通過從 Webflow 遷移來節省 80%。我也見過團隊在 Next.js 中燒毀 $20K 的開發人員時間來建立某個在 Webflow 中只需兩天的東西。背景是一切。
Webflow 定價：你實際上要支付的費用
Webflow 的定價是分層的，這就是混亂開始的地方。你不只是支付一個「計畫」的費用。你支付網站計畫、工作區計畫的費用，可能還有電子商務費用——都是單獨的。
網站計畫（按網站，按月計費）
| 計畫 | 月價格 | CMS 項目 | 帶寬 | 自訂程式碼 |
|---|---|---|---|---|
| 免費 | $0 | 50 | 1GB | 受限 |
| 基礎 | $18 | — | 50GB | 是 |
| CMS | $29 | 2,000 | 200GB | 是 |
| 商務 | $49 | 10,000 | 400GB | 是 |
| 企業 | 自訂 | 自訂 | 自訂 | 是 |
工作區計畫（按團隊）
| 計畫 | 月價格 | 席位 | 託管網站 |
|---|---|---|---|
| 入門 | $0 | 1 | 2 |
| 核心 | $19/席位 | 3+ | 10 |
| 成長 | $35/席位 | 3+ | 無限 |
| 企業 | 自訂 | 自訂 | 自訂 |
所以這裡是實際發生的情況。一個 3 人的小行銷團隊運行 5 個 CMS 計畫網站要支付：
工作區：$19/席位 × 3 = $57/月
網站計畫：$29 × 5 = $145/月
總計：$202/月（$2,424/年）
這並不可怕。但它快速累積。擴展到成長計畫上 10 個網站、6 人團隊：
工作區：$35/席位 × 6 = $210/月
網站計畫：$29 × 10 = $290/月
總計：$500/月（$6,000/年）
這還沒有達到電子商務計畫（每個網站 $29–$212/月）或需要企業功能，如基於角色的發佈、SSO 或 SLA 保證。
企業黑箱
Webflow 不發佈企業定價。根據與經歷過銷售流程的客戶的對話，預期：
- 基本企業功能起價約 $500–$800/月
- 具有 SLA 保證的高流量網站 $1,000–$3,000/月
- 多個網站和自訂要求的大型組織 $5,000–$10,000+/月
年度折扣（最高 22%）會有幫助，但你被鎖定了。功能閘道是真實的——某些團隊發現在項目中途他們需要企業來做感覺應該是標準的事情。
Next.js + Supabase + Vercel：堆疊定價分解
這個堆疊有三個成本組件，每個都按不同方式縮放。
Vercel 定價（2025）
| 計畫 | 基礎成本 | 席位 | 帶寬 | 無伺服器調用 | 建立 |
|---|---|---|---|---|---|
| Hobby | $0 | 1 | 100GB | 1M/月 | 6,000 分鐘 |
| Pro | $20/月 | $20/席位 | 1TB | 1M 已包含 | 24,000 分鐘 |
| 企業 | 自訂 | 自訂 | 自訂 | 自訂 | 自訂 |
Pro 計畫按月 $20 聽起來很便宜，直到你新增開發人員席位。五個開發人員？那就是每月 $100，然後你才開始提供單一頁面。十個開發人員？每月 $200。
但真正的驚喜來自超額：
- 帶寬超額：超過 1TB 後，每 100GB $40
- 無伺服器函式持續時間：超過包含部分後，每 GB-小時 $0.18
- 邊緣函式調用：超過包含部分後，每百萬 $2
Supabase 定價（2025）
| 計畫 | 月成本 | 資料庫 | 儲存 | Auth MAU | 邊緣函式 |
|---|---|---|---|---|---|
| 免費 | $0 | 500MB | 1GB | 50,000 | 500K 調用 |
| Pro | $25/月 | 8GB | 100GB | 100,000 | 2M 調用 |
| 團隊 | $599/月 | 8GB+ | 100GB+ | 100,000+ | 自訂 |
| 企業 | 自訂 | 自訂 | 自訂 | 自訂 | 自訂 |
Supabase 的免費層對小項目來說確實慷慨。跳轉到 Pro（$25/月）可以處理大多數生產應用。計算附加組件（專用實例 $10–$20+/月）是對於性能敏感應用成本爬升的地方。
總堆疊成本示例
// 獨立開發人員，業餘項目
Vercel Hobby：$0
Supabase 免費：$0
總計：$0/月
// 小型創業公司，3 個開發人員，中等流量
Vercel Pro：$20 + ($20 × 3 席位) = $80/月
Supabase Pro：$25/月
總計：$105/月
// 成長公司，8 個開發人員，500K+ 月訪問
Vercel Pro：$20 + ($20 × 8 席位) = $180/月
Supabase Pro + 計算：$45/月
帶寬緩衝：~$40/月
總計：~$265/月
按場景的面對面成本比較
這裡變得有趣。讓我們比較真實世界的場景：
| 場景 | Webflow 月成本 | Next.js 堆疊月成本 | 使用堆疊的年度節省 |
|---|---|---|---|
| 個人作品集/部落格 | $18–$29 | $0（免費層） | $216–$348 |
| 創業行銷網站（3 人） | $145–$200 | $105 | $480–$1,140 |
| 中型公司（6 人，5 個網站） | $400–$600 | $170–$265 | $1,620–$4,020 |
| 企業（10+ 人，高流量） | $1,500–$5,000+ | $300–$600 | $10,800–$52,800 |
| 電子商務（交易型） | $500–$1,500+ | $200–$400 | $1,200–$13,200 |
這些數字講述了一個明確的故事：自訂堆疊在規模上的基礎設施成本要便宜得多。但這裡有一個巨大的星號，它叫做開發人員時間。
沒人會在定價頁面上放的隱藏成本
這是大多數比較文章跳過的章節。不要跳過。
Next.js 堆疊的開發人員成本
Webflow 網站可以由設計師在 1–3 週內建立。可比較的 Next.js + Supabase + Vercel 項目需要一個開發人員 4–12 週，取決於複雜性。
讓我們做數學：
Webflow 建立：設計師 $80/小時 × 60 小時 = $4,800
Next.js 建立：開發人員 $120/小時 × 200 小時 = $24,000
那是初始建立上的 $19,200 差距。即使你聘請像 Social Animal 這樣專門從事此堆疊並高效工作的機構，你仍然在看良好建立的 Next.js 應用的 $8,000–$15,000 對比 Webflow 網站的 $3,000–$7,000。
持續維護
Webflow 處理託管、安全補丁和 CDN 配置。使用自訂堆疊，你或你的團隊需要：
- 監控 Vercel 部署和建立分鐘
- 管理 Supabase 資料庫遷移
- 更新 Next.js 版本（他們大約每年發佈主要版本）
- 處理依賴項漏洞
- 配置和維護 CI/CD 管道
預算每月 5–10 小時的開發人員時間用於維護。按 $120/小時，那是每月 $600–$1,200，你不會在任何定價頁面上看到。
Vercel「稅」問題
我需要談論這個，因為我看到它狠狠咬了團隊。Vercel 的基於使用量的定價意味著流量尖峰可以增加你的帳單。我們的一個客戶在 Reddit 文章爆紅後看到單月 $2,800 的帳單——他們預期支付 $200。
修復方案文件齊全，但需要紀律：
// 盡可能使用 ISR 而不是 SSR
export async function generateStaticParams() {
const posts = await getPosts()
return posts.map((post) => ({ slug: post.slug }))
}
// 設定重新驗證以減少函式調用
export const revalidate = 3600 // 每小時重新驗證
其他節省成本的策略：
- 在導航中使用
next/image進行適當的尺寸設定以減少帶寬 - 禁用激進的鏈接預取
- 盡可能使用靜態生成 (SSG) 而不是伺服器端渲染 (SSR)，其中內容不會因每個請求而改變
- 配置適當的快取標頭
- 考慮對不需要 React 的互動性的內容繁重頁面使用 Astro
第三方整合
當你需要 Webflow 不支援的功能時，它變得昂貴：
- 身份驗證：Memberstack（$25–$200+/月）或 Outseta
- 超越基礎的表單：Zapier（$19.99–$69.99+/月）或 Make
- 搜尋：Algolia（$0–$1/月 用於小型，快速擴展）
- 電子商務複雜性：通常超出 Webflow 的原生功能
使用 Next.js 堆疊，Supabase 為你捆綁身份驗證、即時訂閱、儲存和邊緣函式。你仍然需要支付處理（Stripe）、電子郵件（Resend，$0–$20/月）和可能的 headless CMS——但基礎功能更廣泛。
互動成本框架：建立你自己的估計
由於靜態計算器無法涵蓋每個場景，這是你可以用來估計自己成本的框架。抓一個試算表並填入這些變數：
// === 你的輸入 ===
team_size = ? // 需要訪問的人數
monthly_visitors = ? // 預期月訪問者數
num_sites = ? // 個別網站/應用的數量
needs_auth = ? // 是/否
needs_database = ? // 是/否
needs_ecommerce = ? // 是/否
has_developers = ? // 是/否（內部開發團隊？）
// === WEBFLOW 估計 ===
workspace = team_size <= 1 ? 0 : team_size * 19 // 核心計畫
site_plans = num_sites * 29 // CMS 計畫平均
integrations = (needs_auth ? 50 : 0) + (needs_ecommerce ? 100 : 0)
webflow_total = workspace + site_plans + integrations
// === NEXT.JS 堆疊估計 ===
vercel = has_developers ? (20 + (team_size * 20)) : 20
supabase = needs_database ? 25 : 0
bandwidth_buffer = monthly_visitors > 500000 ? 40 : 0
dev_maintenance = has_developers ? 0 : 800 // 外包月份
stack_total = vercel + supabase + bandwidth_buffer + dev_maintenance
// === 初始建立成本 ===
webflow_build = num_sites * 5000 // 粗略平均
stack_build = num_sites * 15000 // 粗略平均
堆疊變得便宜的交叉點——即使考慮較高的建立成本——通常發生在第 8 到 18 個月之間，取決於團隊規模和複雜性。對於擁有內部開發人員的團隊，它最早可能在第 4 個月發生。
想要我們為你的具體情況運行數字嗎？聯繫我們進行免費成本分析。
Webflow 何時在財務上有意義
Webflow 對每個人來說都不是高估價的。當以下情況發生時，它確實是正確的選擇：
你沒有開發人員。 這是大問題。如果你的團隊是設計師和行銷人員，為 Next.js 堆疊聘請開發人員的成本將遠超任何 Webflow 訂閱。Webflow 客戶報告相比自訂建立的替代方案，開發票証減少 67%，表單轉換率提高 56%。
快速上市比長期成本更重要。 需要在兩週內上線行銷網站？Webflow。相同設計精度的 Next.js 建立需要最少 6–10 週。
網站主要是內容。 部落格、作品集、代理機構網站、落地頁——這些是 Webflow 的優勢。視覺 CMS 對非技術內容團隊來說很好。
你需要少於 5 個網站，有一個小團隊。 在這個規模上，Webflow 的總成本（$100–$300/月）在考慮維護時間時與堆疊競爭。
Next.js 堆疊何時在成本上獲勝
自訂堆疊在這些場景中決定性地領先：
你有內部開發人員。 如果你已經支付開發人員，堆疊的邊際成本只是基礎設施——$100–$300/月對比 Webflow 在規模上 $500–$5,000+。
你需要應用邏輯。 使用者儀表板、即時功能、複雜表單、API 整合、基於角色的訪問——一旦你需要任何這些，Webflow 的附加成本爆炸，而 Supabase 原生處理大多數。
你要擴展超過 5 個網站或 500K 月訪問。 Next.js + Vercel 的基礎設施成本曲線與 Webflow 的按網站定價模型相比大幅趨平。
你需要規模性能。 Next.js 與 Turbopack 和適當的 ISR/SSG 配置一致地提供低於 100ms 的 TTFB。Webflow 的性能，雖然對行銷網站不錯，在可擴展性上評分較低（TrustRadius 可擴展性指標為 1.0/10）。
這是我們遷移的客戶的真實示例。他們在 Webflow 上運行 8 個行銷網站和一個成員門戶：
之前（Webflow）：
工作區成長：$210/月（6 席位）
8 個 CMS 網站：$232/月
Memberstack：$75/月
Zapier：$49/月
總計：$566/月（$6,792/年）
之後（Next.js + Supabase + Vercel）：
Vercel Pro：$140/月（6 個開發席位）
Supabase Pro：$25/月
Resend（電子郵件）：$20/月
總計：$185/月（$2,220/年）
年度節省：$4,572
遷移成本：$18,000
損益平衡：~4 個月
損益平衡很快，因為他們有員工開發人員。如果他們需要聘請機構進行遷移和持續維護，時間軸延伸到 12–14 個月。對他們來說仍然值得——但每個團隊的計算都會改變。
混合方法：兩全其美
這是聰明的團隊在 2025 年實際在做的：使用兩者。
- Webflow 用於行銷頁面——落地頁、活動微網站、由行銷團隊管理的部落格內容
- Next.js + Supabase 用於應用——儀表板、已驗證的體驗、API 繁重的功能
這之所以有效，是因為 Webflow 可以匯出乾淨的 HTML/CSS，你可以通過 iframe 或通過轉換匯出的程式碼將 Webflow 建立的部分嵌入 Next.js 應用。某些團隊在子網域上運行 Webflow（www.example.com），在單獨的子網域上運行應用（app.example.com）。
成本配置看起來有點像：
Webflow CMS（1 個網站）：$29/月
Vercel Pro（應用）：$80/月（3 個開發席位）
Supabase Pro：$25/月
總計：$134/月
你得到兩個世界最好的東西：行銷團隊自主權和開發人員靈活性。我們已經通過我們的 headless CMS 開發服務為多個客戶實現了這個模式，它一致地提供最好的 ROI。
值得考慮的 Vercel 替代方案
如果 Vercel 的定價是個問題，你有選項來託管 Next.js：
| 平台 | 起價 | Next.js 支援 | 最適合 |
|---|---|---|---|
| Vercel | $20/月 + $20/席位 | 原生（他們建立了它） | 完整功能支援 |
| Netlify | $19/席位/月 | 好（一些缺陷） | 更簡單的部署 |
| Cloudflare Pages | 免費–$5/月 | 改進中 | 成本敏感的團隊 |
| Railway | $5/月 + 使用量 | 自我管理 | 預算部署 |
| AWS Amplify | 按使用量付費 | 完整 SSR 支援 | AWS 原生團隊 |
| 自我託管（Docker） | $5–$50/月 | 完全控制 | DevOps 能力的團隊 |
Deployra 和類似服務聲稱對成長中的團隊相比 Vercel 節省 93%。權衡始終相同：更多配置、更少魔力，但費用大幅降低。
常見問題
Webflow 在 2025 年太昂貴了嗎？ 這完全取決於你的使用案例。對於沒有開發人員的小行銷團隊，Webflow 按月 $100–$300 相比聘請開發人員可以說很便宜。但對於需要自訂功能、超過幾個網站的規模或需要企業功能的團隊來說，是的——它變得昂貴了。企業報價 $1,000–$10,000+/月很常見，按網站定價模型意味著成本隨著你的作品組合線性增長。
Webflow 企業實際上要花多少錢？ Webflow 不發佈企業定價。根據行業報告和客戶體驗，預期 $500–$800/月作為基本企業功能的起點，擴展到 $3,000–$10,000+/月 用於具有高流量、多個網站、SLA 要求和 SSO 的大型組織。年度合約通常附帶 15–22% 的折扣。
我能否真的免費託管 Next.js 應用？ 是的，有警告。Vercel 的 Hobby 計畫（$0）提供你 100GB 帶寬和每月 1M 無伺服器函式調用。Supabase 的免費層包括 500MB 資料庫儲存和 50,000 auth 使用者。對於個人項目或低流量的早期創業，這確實是免費的。一旦你需要團隊協作或超過限制，你將跳轉到大約 $45–$105/月。
Vercel 的隱藏成本是什麼？ 主要驚喜是帶寬超額（Pro 上超過 1TB 後 100GB $40）、無伺服器函式持續時間費用、按人數縮放的每席位定價，以及建立分鐘限制。團隊也報告某些 Next.js 功能，如頻繁的 ISR 重新驗證或繁重的中介軟體，可能會增加函式調用計數。在最初幾個月每週監控你的使用儀表板。
Supabase 真的是 Firebase 的好替代方案嗎？ 對於大多數使用案例，是的。Supabase 為你提供完整的 Postgres 資料庫（不是文件存儲）、內建身份驗證、即時訂閱、邊緣函式和檔案儲存。與 Firebase 相比的關鍵優勢是它是標準 SQL——沒有供應商鎖定，你可以將資料庫遷移到任何 Postgres 主機。免費層很有競爭力，Pro 計畫按月 $25 涵蓋大多數生產工作負載。
建立 Next.js + Supabase 網站對比 Webflow 需要多長時間？ Webflow 中的行銷網站對於熟練的設計師需要 1–3 週。在 Next.js 中相同的網站對於開發人員需要 4–8 週。對於具有身份驗證、儀表板和動態內容的複雜應用，Webflow 可能需要 2–4 週加上整合時間用於第三方工具，而 Next.js + Supabase 需要 6–12 週，但給你更可維護的結果。自訂堆疊的初始時間投資稍後會因減少維護和迭代速度而償還。
我應該從 Webflow 遷移到 Next.js 嗎？ 如果遷移：你在你的團隊中有開發人員、你的 Webflow 帳單超過 $400/月、你擊中平台限制（自訂邏輯、性能、CMS 項目限制），或你需要 Webflow 無法原生提供的功能。不要遷移如果：你的團隊是非技術的、你的網站主要是內容驅動的，有簡單的互動，或你目前的 Webflow 成本低於 $200/月。遷移本身成本 $8,000–$25,000 取決於複雜性，所以確保損益平衡時間軸適合你的預算。
2025 年創業的最佳堆疊是什麼？ 對於大多數創業，我們推薦混合方法：Webflow 用於你的初始行銷網站（快速上市），然後 Next.js + Supabase + Vercel 用於你的產品應用。這保持行銷成本低，同時給你的開發團隊對產品體驗的完全控制。隨著你的規模，你可以將行銷網站遷移到 Next.js 或保持在 Webflow——兩者都有效。查看我們的 定價頁面，看這個在機構支援下是什麼樣的。