從 Bolt 到 Strapi 再到自訂架構：真實的產品旅程
沒有人第一次嘗試就完全成功。相信我，我見過這個故事上演過很多次。一位創辦人在隨意的週五晚上開始用 Bolt.new 實驗。到了週一，他們已經有了可行的東西。接著開始舞蹈：在接下來的十八個月裡，他們系統性地換掉每一個零件。這不是失敗。各位，這就是建立有價值東西的真正魔力。
我們在這裡深入探討那個旅程。忘記那個完美世界，在那裡一切都計劃得盡善盡美。在這裡會很混亂 -- 你開始用一些AI生成的片段，也許會碰到像Strapi這樣的無頭CMS。最終，你會落腳在那個甜蜜的自訂設定，感覺就像量身打造的。在Social Animal，我們帶領過相當多的客戶穿過這個混亂。模式會出現。他們通常會的。
第一階段：AI原型時代
這就是Bolt.new的交易。它既超酷又有點危險。
與Lovable（前身為GPT Engineer）、v0 by Vercel和Cursor等競爭對手並肩，Bolt讓你可以在幾小時內將想法變成可運作的應用程式。不是幾天。幾小時。我看過創辦人在一個下午內就推出完整的Next.js應用程式，具有驗證甚至支付掛鉤。
以下是Bolt輸出內容的一個樣本：
// Bolt生成的API路由 -- 看起來很乾淨，對吧？
import { NextRequest, NextResponse } from 'next/server';
import { prisma } from '@/lib/prisma';
import { getServerSession } from 'next-auth';
export async function GET(req: NextRequest) {
const session = await getServerSession();
if (!session) {
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
}
const projects = await prisma.project.findMany({
where: { userId: session.user.id },
include: { tasks: true, members: true },
});
return NextResponse.json(projects);
}
這段程式碼？它能運作，而且還不錯，特別是在2025年。但不要被光滑的語法所迷惑。問題從來不在代碼品質；而在於圍繞它的一切。
AI原型做對的事
- 速度到首版。 沒有什麼能與之相提並論。
- UI框架。 基於Tailwind看起來光滑的介面？那是Bolt的強項。
- 基本CRUD操作。 你涵蓋了主要是表單和列表的應用程式。
- 想法驗證。 在幾天內，而不是幾年內向用戶展示你的應用程式。
他們做得不太好的事
AI生成的代碼？它對你的獨特需求毫無概念。不知道你的「專案」實體是一個包含階段的複雜獸體，或者你的層級結構不只是「管理員」和「用戶」。
一次，我查看了一個Bolt生成的建築專案管理工具。這肯定是一個整潔的CRUD應用，當然。但沒有專案階段、沒有細微的角色，也沒有大量資料提取上的分頁。快速演示？完美。擴展到500個專案和2,000個用戶？那艘船會沉。
第二階段：為什麼原型會遭遇困境
困境像貨運列車一樣向你襲來。通常在兩到三個月左右，以下其中一個會給你絆倒：
- 內容需求每天都在改變。 行銷想要隨意調整登陸頁面。
- 資料模型複雜性。 關係、工作流程 -- AI不能未卜先知。
- 團隊成員需要存取權限。 突然間，非技術人員需要接觸內容。
- 效能頭痛。 真實使用者、真實資料、真實連線？暴露了你採取的任何捷徑。
- 整合需求。 支付、電子郵件、分析、CRM -- 壓力測試在這裡發生。
這裡經常被忽略的是：原型不是失敗。 它就像排練；在顯示什麼有效、什麼需要調整方面是無價的。
但老兄，我見過很多團隊花了半年時間在AI代碼上貼補功能，製造了技術債務的義大利麵怪獸，而當一個理智的重建只需要兩個月時。
第三階段：無頭CMS的折衷方案
當你需要超越原型但還沒準備好從頭開始建造時，這是你的空隙填補階段。Strapi就是在這裡介入。
為什麼特別是Strapi？
我和很多無頭CMS選項搭過手 -- Strapi、Contentful、Sanity。以下是Strapi如何站起來：
| 功能 | Strapi | Contentful | Sanity | Payload | Directus |
|---|---|---|---|---|---|
| 自託管選項 | ✅ | ❌ | ❌ | ✅ | ✅ |
| 開源 | ✅ | ❌ | 部分 | ✅ | ✅ |
| 自訂欄位/外掛 | 優秀 | 良好 | 優秀 | 優秀 | 良好 |
| 學習曲線 | 中等 | 低 | 中等 | 中等 | 低 |
| 價格 (2025) | 自託管免費，$29/月起雲端 | $300/月起 | $99/月起 | 自託管免費，$29/月起雲端 | 自託管免費 |
| API靈活性 | REST + GraphQL | REST + GraphQL | GROQ + GraphQL | REST + GraphQL + 本地API | REST + GraphQL |
| TypeScript支援 | 良好 (v5+) | 僅SDK | 優秀 | 原生 | 良好 |
Strapi很棒，因為它是開源的、自託管的，而且可自訂。非開發人員可以不用每五分鐘就撥一個開發者就跳進去。
在Social Animal，我們製作過很多無頭CMS專案。Strapi通常是我們的首選，除非Payload或Sanity更適合特定需求。
Strapi階段看起來像什麼
一個真實的場景？一個客戶使用Bolt建立了一個自由設計師市場。這個東西被硬編碼到了極致，缺少部落格的CMS。
我們這樣重組了它：
- 前端： 使用App Router的Next.js 15
- CMS： 用於管理內容和使用者的Strapi v5
- 資料庫： 從SQLite轉換為PostgreSQL
- 驗證： 管理員的Strapi驗證；應用程式的NextAuth.js
- 託管： Vercel上的前端，Railway上的Strapi加Postgres
// 在Next.js伺服器元件中從Strapi中獲取
async function getDesignerProfiles() {
const response = await fetch(
`${process.env.STRAPI_URL}/api/designers?populate[0]=portfolio&populate[1]=reviews&pagination[pageSize]=20&sort=rating:desc`,
{
headers: {
Authorization: `Bearer ${process.env.STRAPI_TOKEN}`,
},
next: { revalidate: 60 }, // ISR：每分鐘重新驗證
}
);
if (!response.ok) throw new Error('Failed to fetch designers');
const data = await response.json();
return data.data;
}
這個設定在大約八個月內對他們有幫助。他們從50成長到2,000個使用者，並無縫地管理內容。管理團隊在沒有任何開發人員呼叫的情況下跟上進度。
成本？大約每月$150加上他們在初始開發上花費的任何費用。
第四階段：當Strapi不再足夠時
Strapi閃閃發光，直到你的邏輯超越簡單的內容crud。當你的應用程式的商業邏輯比你包裡底部的耳機還要糾纏時，是時候考慮更大的事情了。
自訂商業邏輯變得尷尬
使用Strapi，自訂規則被塞進生命週期鉤子：
// 這是一個失控的真實Strapi生命週期鉤子
// 不要這樣做。
module.exports = {
async afterCreate(event) {
const { result } = event;
// 計算設計師評分
const reviews = await strapi.entityService.findMany('api::review.review', {
filters: { designer: result.designer.id },
});
const avgRating = reviews.reduce((sum, r) => sum + r.rating, 0) / reviews.length;
// 更新設計師檔案
await strapi.entityService.update('api::designer.designer', result.designer.id, {
data: { rating: avgRating, reviewCount: reviews.length },
});
// 寄送通知電子郵件
await strapi.plugins['email'].services.email.send({
to: result.designer.email,
subject: 'New Review',
text: `You received a ${result.rating}-star review!`,
});
// 更新搜尋索引
await updateAlgoliaIndex('designers', result.designer.id, { rating: avgRating });
// 檢查設計師是否符合精選狀態資格
if (avgRating >= 4.8 && reviews.length >= 10) {
await strapi.entityService.update('api::designer.designer', result.designer.id, {
data: { featured: true },
});
// 通知行銷團隊
await notifySlackChannel('marketing', `${result.designer.name} is now featured!`);
}
},
};
看到那個嗎？一個簡單的after-create鉤子剛剛爆炸成一個怪物 -- 評分、電子郵件、搜尋更新、團隊通知。維護起來不有趣。
效能上限
Strapi是為內容而設計的，不是用於繁重的資料處理或複雜查詢。一旦東西擴展了，你最終會寫原始SQL來繞過她的限制。說實話？當它達到這一點時，你質疑為什麼你還在用她。
API介面超越內容而成長
需要WebSockets、背景工作或自動化webhook？就像試圖把方形樁放進圓形孔。
第五階段：正確完成的自訂架構
這是我們拿出大槍的地方。你現在知道你的領域；你看過使用者喜歡什麼。是時候進行那個自訂設定了。
但不是從頭開始。
以下是我們如何渦輪增壓那個相同的市場：
┌─────────────────────────────────────────────────────┐
│ 前端層 │
│ Next.js 15 (App Router) + React伺服器元件 │
│ 部署在Vercel（邊緣 + 無伺服器） │
├─────────────────────────────────────────────────────┤
│ API層 │
│ tRPC用於型別安全的內部API │
│ 用於第三方整合的REST webhook │
│ WebSocket伺服器（Fly.io上的Hono）用於即時 │
├─────────────────────────────────────────────────────┤
│ 服務層 │
│ 驗證：Clerk（從DIY轉移 -- 值得每一分錢） │
│ 支付：Stripe Connect（市場支付） │
│ 搜尋：Typesense（取代Algolia -- 便宜90%） │
│ 電子郵件：Resend + React Email │
│ 工作：Trigger.dev（背景處理） │
│ CMS：Sanity（編輯內容僅限） │
├─────────────────────────────────────────────────────┤
│ 資料層 │
│ Neon上的PostgreSQL（無伺服器，分支） │
│ Drizzle ORM（型別安全，高效） │
│ Upstash上的Redis（快取、速率限制） │
└─────────────────────────────────────────────────────┘
注意Sanity堅持下去。它非常適合處理編輯部分。同時，所有真正努力的產品資料都在好老的PostgreSQL中找到了它的位置。
要點是什麼？在需要時自訂應用程式，在有意義時使用CMS。他們是不同的；像對待這樣的東西。我們經常將這個架構與Next.js專案和用於內容豐富的網站的Astro配對。
每個階段的成本現實
金錢說話，所以讓我們直言不諱：
| 階段 | 時間線 | 開發成本 | 月度基礎設施 | 月度SaaS |
|---|---|---|---|---|
| Bolt原型 | 1-2週 | $0-500（你的時間） | $0-20（Vercel免費層） | $20（Bolt Pro） |
| Strapi + Next.js | 4-8週 | $15,000-40,000 | $50-200 | $0-100 |
| 自訂架構 | 8-16週 | $40,000-120,000 | $200-800 | $200-600 |
| 擴展自訂 | 持續進行 | $5,000-20,000/月（團隊） | $500-5,000 | $500-2,000 |
真實數字，沒有廢話。規則是什麼？每個階段都應該通過上一階段的收入或見解來為自己買單。 在你準備好之前，不要為夢想設定花費你的所有積蓄。
如果你需要幫助破譯你所處的階段，讓我們聊天 -- 查看我們的價格概覽。
何時知道何時前進
這個很棘手，但以下是危險信號：
從原型到無頭CMS
- 你仍在編輯原始JSON或HTML以進行內容調整。
- 非技術團隊成員被困，等待開發管道。
- 你的應用程式看起來像一個巨大的複製貼上工廠。
- 你仍在使用SQLite，或者，天哪，JSON檔案。
- 你已使用真實使用者驗證了你的想法。
從無頭CMS到自訂架構
- 你的Strapi設定因自訂程式碼而爆炸。
- 你直接在CMS外戳資料庫。
- 效能即使在輕微流量下也會下降。
- 複雜的需求將CMS變成了一個糾纏的混亂。
- 良好的收入反映了對更好可擴展性的需求。
真正重要的技術棧決定
在經歷了所有這些之後，有些選擇的重要性超乎你的想像。
重要的決定
資料庫選擇。 PostgreSQL幾乎九次中有一次是最佳選擇，除非你有一個非常好的理由去別處。
驗證。 永遠不要自己動手。無論是Clerk、Auth.js還是Supabase，相對於潛在陷阱，價格微不足道。
託管模型。 無伺服器適合一般使用，除非實時應用程式要求更強大的東西。
現在不重要的決定
CSS框架。 選一個並去做。Tailwind、CSS Modules，無論什麼 -- 你以後總是可以交換。
狀態管理。 React伺服器元件緩解了這場辯論。在絕對必要之前，不要拖入額外的套件。
Monorepo工具。 一旦你需要它，好的，但在第一天就不要陷入這個泥潭。
黃金法則很簡單：「為今天的速度而建造，為明天保持選項開放。」沒有銀色子彈，只有明智的決策。如果你在這些水域中航行並希望有一個老手在你身邊，聯繫我們。我們在這個街區已經走了很多次，可能會救你一些陷阱。
常問問題
我應該從Bolt.new開始還是從一開始就適當地構建？ 如果你仍在測試水域，請從Bolt或類似的東西開始。這是在不燒錢的情況下驗證你的想法並做出決定性樞軸的最快方法。
在2025年，由於Payload CMS受到如此多關注，Strapi仍然值得使用嗎？ 當然，兩者各有所長。Strapi v5的改進使其成為一個強有力的競爭對手。對於首個Next.js產品，Payload可能有優勢。
從Strapi轉移到自訂架構需要花費多少？ 對於典型的SaaS設定，估計$40,000-$120,000。複雜性和資料轉移需求會偏斜時間和成本。
Bolt.new能生成生產就緒的程式碼嗎？ 這是一個起點，不是終點。使用Bolt進行原型並計劃隨後加強和精化程式碼。
團隊在這個發展過程中犯的最大錯誤是什麼？ 在一個階段停留太久。當問題出現時，你會看到它們 -- 不要忽視它們。
我應該使用無頭CMS還是構建自訂管理面板？ 除非你的管理系統是核心產品，否則從CMS開始。構建一個拋光的管理後端很耗時且昂貴。
我如何說服我的技術聯合創辦人停止在原型上構建？ 量化它。繪製錯過的時間表、低效率，以及新功能如何演變為苦差事。為速度而不是傲慢做出案例。
有可能完全跳過無頭CMS階段嗎？ 是的，但這很罕見。你需要堅實的技術領導力和對你的需求的堅不可摧的理解才能直接跳轉到自訂 -- 通常只適用於利基開發人員工具或互動式應用程式。