從 0 到 1 的 AI SaaS 架構：2026 年的技術選型指南

2024 年選技術棧，你要比較三個框架。2026 年，你要比較三個框架、五個 BaaS、四個 AI SDK、六個部署平台，還有一堆每週都冒出來的新工具。

選擇太多不是自由，是癱瘓。

更麻煩的是，AI 工具改變了工程效率的公式。以前「學習曲線陡但功能強大」的工具值得投資，因為你會用很久。現在 AI 幫你寫大部分 code，學習曲線的成本大幅降低——但整合摩擦的成本反而更高了，因為 AI 在工具邊界處最容易出錯。

這篇文章不做全面比較。每個決策點，我給你一個推薦、一個理由。你可以不同意，但至少你有一個可以立刻動手的起點。

決策 1：框架 — Next.js App Router

推薦：Next.js 15+（App Router）

其他選項：Remix、Nuxt、SvelteKit

Next.js 的優勢不在於它是「最好的框架」——而在於它的生態系最完整。你遇到的任何問題，都有人遇到過並且寫了解法。AI 工具對 Next.js 的理解也最深，因為訓練資料裡 Next.js 的比例最高。

App Router 相比 Pages Router 的核心改進是 Server Components。你可以在組件層級決定哪些東西在 server 跑、哪些在 client 跑，而不是在頁面層級做這個決策。這對 SaaS 產品很重要——你的大部分頁面都是混合的：一些靜態內容 + 一些需要 auth 的動態資料。

Remix 的 loader/action 模型很優雅，但生態系和 AI 工具支援都遠不如 Next.js。Nuxt 是 Vue 生態的最佳選擇，但如果你沒有 Vue 的歷史包袱，React 生態的深度和廣度仍然是壓倒性的。

決策 2：資料庫 — Supabase

推薦：Supabase

其他選項：PlanetScale（已停止免費方案）、Neon、Turso

Supabase 不只是資料庫。它是 Postgres + Auth + Storage + Realtime + Edge Functions 的整合包。對獨立開發者來說，這意味著你只需要管理一個服務，而不是五個。

具體的優勢：

• Row Level Security（RLS）：在資料庫層做權限控制，不用在每個 API 裡重複寫 auth check
• 即時訂閱：一行 code 就能監聽資料庫變更，不需要自己架 WebSocket
• 本地開發：supabase start 在本機跑一個完整的 Supabase，包括 Postgres、Auth、Storage

Neon 的 serverless Postgres 很棒，但你還是需要自己處理 auth 和 storage。PlanetScale 的免費方案已經取消。Turso 的 SQLite 模型有趣但生態系還太小。

選 Supabase 的核心理由：一個帳號搞定後端的 80%。

決策 3：Auth — Supabase Auth

推薦：Supabase Auth

其他選項：Clerk、NextAuth（Auth.js）、Lucia

如果你已經選了 Supabase 做資料庫，Auth 直接用 Supabase Auth 是最自然的選擇。用戶資料和認證狀態在同一個系統裡，RLS policy 可以直接用 auth.uid() 取得當前用戶，不需要額外的 middleware 橋接。

Clerk 的 UI 元件很漂亮、開發體驗很好，但它是獨立的第三方服務——你的用戶資料在 Clerk，業務資料在 Supabase，兩邊要同步。對大型團隊來說這不是問題，但獨立開發者多一個同步點就多一個出錯的機會。

NextAuth 靈活但設定繁瑣，每次升版都有 breaking change 的風險。

原則：auth 和資料庫在同一個系統裡，少一層整合就少一類 bug。

決策 4：部署 — Vercel

推薦：Vercel

其他選項：Fly.io、Railway、Cloudflare Pages

Vercel 對 Next.js 的支援是原生的——這不意外，因為 Next.js 就是 Vercel 的產品。Preview deployments 讓每個 PR 都有獨立的預覽環境，這個功能在獨立開發中的價值被嚴重低估：你可以把預覽連結丟給早期用戶看，不用等正式部署。

Fly.io 適合需要跑 long-running process 或自訂 Docker 容器的場景。Railway 的 DX 很好但在 Next.js 的優化上不如 Vercel。Cloudflare Pages 便宜但 Node.js 相容性有限。

Vercel 的免費方案對 MVP 階段綽綽有餘。等你有營收了，Pro 方案 $20/月也不是問題。

決策 5：計費 — Polar.sh

推薦：Polar.sh（獨立開發者）

其他選項：Stripe、Lemon Squeezy、Paddle

Stripe 是計費的業界標準，但它的複雜度是為大型 SaaS 設計的。Products、Prices、Subscriptions、Invoices、Checkout Sessions——光搞清楚這些概念的關係就要花一個下午。

Polar.sh 是為獨立開發者和開源專案設計的計費平台。它的心智模型更簡單：建一個產品、設定價格、拿到一個結帳連結。訂閱管理、發票、退款都內建處理。

核心優勢：

• API 更直覺：不需要理解 Stripe 的多層物件模型
• Webhook 更乾淨：事件結構簡單，不會收到二十種你用不到的 event type
• 內建 customer portal：用戶可以自己管理訂閱，你不用做這個頁面

如果你未來需要 Stripe 的複雜功能（usage-based billing、marketplace、Connect），再遷移不遲。MVP 階段，Polar.sh 讓你一天之內搞定整個計費。

決策 6：AI 整合 — Vercel AI SDK

推薦：Vercel AI SDK

其他選項：LangChain、直接呼叫 API、LlamaIndex

如果你的 SaaS 需要 AI 功能（聊天、摘要、生成），Vercel AI SDK 是目前整合度最高的選擇。它提供統一的介面呼叫不同的模型（OpenAI、Anthropic、Google），並且和 Next.js 的 streaming 深度整合。

import { generateText } from 'ai'
import { anthropic } from '@ai-sdk/anthropic'

const { text } = await generateText({
  model: anthropic('claude-sonnet-4-6'),
  prompt: '用一句話解釋 RAG',
})

LangChain 的抽象層太厚，對獨立開發者來說維護成本太高。直接呼叫 API 可以，但你會重複造輪子（streaming、retry、error handling）。

Vercel AI SDK 搭配 AI Gateway 還能做 model routing——開發時用便宜的模型，production 用強的模型，不改 code。

決策 7：樣式 — Tailwind + shadcn/ui

推薦：Tailwind CSS + shadcn/ui

其他選項：CSS Modules、styled-components、MUI、Chakra UI

Tailwind 在 2026 年已經不需要辯護了。AI 工具對 Tailwind 的理解比任何其他 CSS 方案都好——你說「做一個卡片，圓角、陰影、hover 變色」，AI 直接給你正確的 utility classes。

shadcn/ui 不是一個組件庫——它是一個組件集合，你把需要的組件複製到自己的專案裡，完全可以修改。這意味著你不會遇到「組件庫的限制擋住我」的問題，也不會有「升版 breaking change」的風險。

這個組合的殺手優勢：AI 生成的 UI code 幾乎不需要修改就能用。因為 Tailwind 的 utility classes 是自描述的，AI 不容易生成錯誤的樣式。

完整技術棧清單

直接複製，今天就開始：

這不是唯一正確的選擇。但這是一個整合摩擦最低、AI 工具支援最好、獨立開發者能最快跑起來的組合。

最後一件事

技術選型的最大風險不是選錯——而是不選。你花三個月比較框架，別人已經上線、拿到第一個付費用戶、根據真實回饋迭代了三輪。

完美的技術棧不存在。夠好的技術棧加上今天就動手，勝過完美的技術棧加上下個月再說。

想看這套技術棧的實際搭建教學？我們在 SaaS 架構實戰 裡從 create-next-app 開始，一步步帶你建起完整的付費產品。