從 V0 到上線：用V0 +Vercel + Supabase 快速打造網站

V0 (viber coding)

V0是vercel 推出的 viber coding平台，完成開發後可以一鍵部署到vercel上面 vo 線上viber codeing 平台 基本上預設開發就是next.js。

想要viber coding 可以先用v0整合好supabase等 一鍵部署到vercel,在用cursor等優化程式和結構細節。

這樣幾乎是雲端一條龍開發，開發完成部署也完成了

什麼是 Vercel？

Vercel 是一個雲端無伺服器平台，專門用於靜態和混合應用程式的部署與託管。它提供了全球內容分發網路（CDN）、自動擴展、持續部署等功能，讓開發者能夠專注於程式碼開發而不需要擔心伺服器管理。

非常適合前端網站 靜態網站部署
也提供偏向全端的網站(next.js)部署

Vercel 的主要特色

• 無縫整合：與 Next.js 完美整合，提供最佳化的建置與自動靜態最佳化
• 全球 CDN：應用程式會部署到 Vercel 的邊緣網路，確保全球使用者都能快速存取
• 自動部署：每次推送程式碼到連接的 Git 儲存庫都會觸發自動部署
• 無伺服器函數：輕鬆部署無伺服器函數作為 API 路由，隨需求自動擴展

最新應對ai浪潮有推出 Fluid Compute(持續server 服務)，補足了靜態伺服器的缺點

特點是非常方便部署和提供一定量免費額度+CI/CD方便。目前 V0 dev 就是 Vercel 出的，能快速整合 Next.js 的網站。

Vercel 與 Supabase 整合

Supabase 是什麼？

Supabase 是一個開源的 Firebase 替代方案，提供 PostgreSQL 資料庫、身份驗證、即時訂閱等功能。將 Vercel 與 Supabase 整合可以建立強大的全端應用程式。

整合好的PostgreSQL 資料庫，新手友善，有ui可以建立資料表

最棒的是已經整合好身份驗證、即時訂閱等，簡化了會員註冊登入等開發

不一定要用官方的線上版本可以自己獨立部署是，是開源的。

supabasee官網
supabase documents

串聯原理是什麼？

如果是用next.js ,API Routes 會被轉換為 Vercel 的無伺服器函數（Serverless Functions） 這種方式中，API router會在 Vercel 的無伺服器函數中執行發送到 Supabase 的 REST API 端點.進行資料庫CRUD(加入，更改，刪除，資料庫資料)

前端 → Vercel Serverless Functions → Supabase

• 前端發送請求：React/Next.js 前端透過 fetch() 或其他 HTTP 客戶端向你的 API Routes 發送請求

• Serverless Functions 處理：Next.js API Routes 在 Vercel 無伺服器函數中執行

• Supabase：無伺服器函數使用 Supabase JavaScript 客戶端與 Supabase REST API 進行資料庫 CRUD 操作

API key：敏感的 SUPABASE_SERVICE_ROLE_KEY 只存在於伺服器端

整合方式

安裝 Supabase 整合

1. V0 dev AI 編輯就有整合選項，或是用 Vercel 平台提供的 template 已經整合好

   • Vercel 提供的template

2. 或是在 Vercel 控制台進入 Settings → Integrations

   • 搜尋並安裝 Supabase 整合
   • 選擇要整合的 Vercel 專案和 Supabase 專案

3. 當然也可自己串接

總結

1. vercel：是無伺服器部署的雲端服務,可以做到一鍵部署,自動串接github, ci/cd。
2. supabase：是postgresql的開發友善版本，可方便整合登入/註冊等服務
3. vercel Ai:有推出vo 線上viber codeing,加上新推出的Fluid Compute 未來可以更輕易做出ai服務(ai chatbot之類)。