不熟悉這些技術的概念？先看技術地圖篇。
2026 年前端工具鏈已經夠成熟，大多數需求都有「行業預設答案」。這不代表沒有其他選擇，而是這些組合踩過最多坑、有最多人在維護、出問題最容易找到答案。
SaaS #
核心訴求： 快速上線、Auth、付費、權限
範例：
| 層 | 工具 |
|---|---|
| Framework | Next.js + TypeScript |
| UI | Tailwind + shadcn/ui |
| Auth | Clerk 或 NextAuth |
| DB | Supabase / Neon（Postgres） |
| 付費 | Stripe |
| Resend 或 SendGrid | |
| 背景任務 | Inngest 或 Trigger.dev |
| Deploy | Vercel |
最省力的組合。Supabase 把 DB + Auth + Storage 打包在一起，Resend 處理 transactional email，Inngest 處理不能在 serverless function 裡跑的長任務。
互動官網 #
核心訴求： 視覺衝擊、動畫、效能、SEO
範例：
- Stripe 官網（Next.js + 自訂 WebGL）
- Awwwards 得獎作品（各種 stack，代表互動視覺水準）
| 層 | 工具 |
|---|---|
| Framework | Next.js 或 Astro |
| 捲動動畫 | GSAP + ScrollTrigger |
| 過渡動畫 | Framer Motion |
| 3D 點綴 | Three.js / Spline |
| 微動畫 | Lottie（After Effects 輸出） |
| CMS | Sanity 或 Contentful |
| 效能 | next/image、字型最佳化、Critical CSS |
| Deploy | Vercel / Netlify |
GSAP 是捲動動畫的業界標準，ScrollTrigger 讓捲動驅動動畫變得很容易。Lottie 用來播 After Effects 做的細緻微動畫。
3D 展示 #
核心訴求： 模型載入、PBR 材質、互動、行動裝置效能
範例：
- Deutsche Windtechnik（Three.js，POLISH™ 製作）
- Three.js 官方範例（Three.js）
| 層 | 工具 |
|---|---|
| 3D 引擎 | Three.js |
| React 綁定 | React Three Fiber + Drei |
| 模型格式 | GLB / glTF |
| 模型壓縮 | gltf-transform + Draco |
| 貼圖壓縮 | Basis Universal / KTX2 |
| 後製效果 | @react-three/postprocessing |
| 效能監控 | Stats.js（FPS / draw call） |
| Deploy | Vercel / Netlify |
這條路學習曲線最陡，但也是台灣市場最稀缺的能力。gltf-transform 可以把模型體積壓到原來的 30%，KTX2 貼圖壓縮對行動裝置記憶體影響最大。
Dashboard #
核心訴求： 大量資料、表格、圖表、篩選
範例：
| 層 | 工具 |
|---|---|
| Framework | Next.js 或 Vite + React |
| 表格 | TanStack Table |
| 圖表 | Recharts 或 Tremor |
| 複雜視覺化 | D3.js（完全自訂時） |
| 狀態 | Zustand |
| 資料快取 | React Query（REST）或 Apollo（GraphQL） |
| 即時更新 | WebSocket 或 SSE |
| UI | shadcn/ui |
| Deploy | Vercel |
TanStack Table 幾乎已經成為複雜表格的唯一選擇。需要即時資料更新（監控、股價）的 dashboard 再加 WebSocket 或 SSE。
AI App #
核心訴求： LLM 串接、串流輸出、context 管理
範例：
- Claude.ai（Anthropic API）
- v0.dev（Vercel AI SDK + Next.js）
- Perplexity（Next.js）
| 層 | 工具 |
|---|---|
| Framework | Next.js |
| AI SDK | Vercel AI SDK |
| LLM | Anthropic / OpenAI API |
| 向量資料庫 | Supabase pgvector 或 Pinecone |
| Embedding | OpenAI text-embedding 或 Cohere |
| 本地模型 | Ollama |
| Agent 框架 | LangChain / LlamaIndex（複雜邏輯時） |
| Deploy | Vercel |
AI App 不是一種固定形狀——純 chat、tool call agent、RAG 知識庫，或在既有產品裡加 AI 功能都算。Vercel AI SDK 把串流、tool use、history 管理封裝好了，2026 年再從頭刻 streaming 是浪費時間。
Web Game #
核心訴求： 遊戲迴圈、物理、效能、輸入處理
範例：
- Phaser 官方範例（Phaser.js）
- R3F + Rapier 範例（React Three Fiber + Rapier 物理引擎）
| 層 | 工具 |
|---|---|
| 2D | Phaser.js |
| 3D | Three.js 或 Babylon.js |
| 3D + React | R3F + @react-three/rapier（物理） |
| 狀態機 | XState（複雜遊戲狀態） |
| 音效 | Howler.js |
| 多人 | Colyseus 或 Socket.io |
| Asset 管理 | Phaser Loader / THREE.LoadingManager |
Babylon.js 比 Three.js 更「遊戲引擎導向」，內建物理、碰撞、輸入系統。XState 管理「選關 → 遊戲中 → 暫停 → 結算」這類複雜狀態最清晰。
電商 #
核心訴求： 商品管理、金流、SEO、庫存
範例：
| 層 | 工具 |
|---|---|
| 平台 | Shopify（快）或 Medusa（自架） |
| Storefront | Next.js + Shopify Storefront API |
| 付費 | Stripe 或 Shopify Payments |
| 搜尋 | Algolia |
| 分析 | Google Analytics + Meta Pixel |
| Deploy | Vercel |
不要自己做金流。Shopify 能解決 80% 的電商需求，真的需要完全掌控後端才考慮 Medusa。Algolia 讓商品搜尋秒出結果，比資料庫 LIKE query 好幾個量級。
內容平台 #
核心訴求： 文章管理、SEO、RSS、快速載入
範例：
- Astro 官方文件（Astro）
- 這個部落格（Hugo + Blowfish）
| 層 | 工具 |
|---|---|
| 靜態生成 | Astro 或 Hugo |
| 動態功能 | Next.js（需要付費訂閱或會員） |
| CMS | Sanity / Contentful / MDX 直接寫 |
| 主題 | Blowfish（Hugo）/ Starlight（Astro） |
| 站內搜尋 | Pagefind（靜態，零後端） |
| 留言 | Giscus（GitHub Discussion 驅動） |
| Deploy | Netlify / Vercel / GitHub Pages |
Hugo 建置速度最快（千篇文章秒出），Astro 更現代且可混用 React 元件。Pagefind 是靜態網站搜尋的最佳解，build 時自動產生搜尋索引，不需要後端。
WebXR / AR #
核心訴求： 相機、空間定位、3D 物件疊加到現實
範例：
- model-viewer（Google 出品，WebXR）
- 8th Wall 範例（商業 WebAR 平台）
| 層 | 工具 |
|---|---|
| 底層 | WebXR API |
| 3D | Three.js / Babylon.js |
| 快速起步 | <model-viewer>（Google，支援 AR Quick Look） |
| 免費方案 | AR.js + A-Frame |
| 商業方案 | 8th Wall |
| iOS 模型格式 | USDZ（Safari AR Quick Look） |
| Android 模型格式 | GLB（Scene Viewer） |
WebXR 的瀏覽器支援到 2026 年還是很破碎，iOS Safari 支援有限。<model-viewer> 是最省力的起點，一行 HTML 就能在手機上看 AR 模型。
即時協作 #
核心訴求： 多人同步、衝突解決、低延遲
範例：
- Excalidraw（React + Yjs）
- tldraw（React + Yjs）
| 層 | 工具 |
|---|---|
| Framework | React / Next.js |
| 多人同步 | Liveblocks 或 PartyKit |
| CRDT 衝突解決 | Yjs |
| 白板 UI | tldraw（可嵌入） |
| WebSocket | Socket.io 或 Partyserver |
| Deploy | Vercel + 需要 WebSocket server |
CRDT（Conflict-free Replicated Data Type）是多人同時編輯不衝突的關鍵技術，Yjs 是目前最成熟的實作。Vercel Serverless 不支援長連線，需要另外架 WebSocket server（Railway / Fly.io）。
地圖 / 地理視覺化 #
核心訴求： 地圖底圖、大量資料點、空間查詢
範例：
- Deck.gl 官方範例（Deck.gl）
- Kepler.gl（Deck.gl，Uber 出品）
| 層 | 工具 |
|---|---|
| 地圖底圖 | Mapbox GL JS 或 MapLibre |
| 大量資料 | Deck.gl |
| 高階分析 | Kepler.gl（Deck.gl 上層） |
| 空間資料庫 | PostGIS 或 Supabase（支援地理查詢） |
| 資料格式 | GeoJSON / PMTiles |
| Deploy | Vercel |
Mapbox 功能最完整但要付費，MapLibre 是開源替代。Deck.gl 可以在地圖上渲染百萬個資料點而不卡頓，靠 WebGL instancing 實現。
怎麼選 #
有 3D 需求？
├─ 是 → Three.js / R3F
└─ 否
├─ 有 AI 功能？ → Next.js + Vercel AI SDK
├─ 是 SaaS？ → Next.js + Supabase + Stripe
├─ 是電商？ → Shopify 或 Medusa
├─ 純內容 / 部落格？ → Astro 或 Hugo
├─ 地圖 / 地理資料？ → Mapbox / Deck.gl
├─ 多人即時協作？ → Yjs + Liveblocks
├─ 重視動畫視覺？ → Next.js / Astro + GSAP
└─ 大量資料表格？ → React + TanStack Table
選技術不難，難的是知道自己的需求屬於哪一類。分類錯了，再好的 stack 也解決不了問題。