supabase-nextjs

supabase-nextjs 技能總覽

這個 supabase-nextjs 技能能做什麼

supabase-nextjs 技能可協助你用 Next.js App Router 搭配 Supabase 建立應用程式，涵蓋驗證、儲存與即時功能，同時使用 Drizzle ORM 進行資料庫查詢。它特別適合想把伺服器端渲染的應用邏輯與後端服務清楚分層的團隊，而不是那種泛用的「把一切串起來」提示詞。

最適合哪些情境

如果你正要開始，或正在擴充一個需要登入、註冊、受保護路由、伺服器端 session 處理，以及型別化資料庫存取的 Next.js 應用，就很適合使用 supabase-nextjs 技能。它在 supabase-nextjs for Backend Development 這類工作流程中特別實用，因為你可以為驗證和 SQL 查詢各自維持一套清楚的模式。

主要判斷重點

supabase-nextjs 技能最關鍵的差異點在於架構選擇：用 Drizzle 做資料存取、用 Supabase 處理驗證與儲存，並預設採用 server components。這能降低你在判斷程式碼應該放哪裡、session 應該怎麼流轉，以及何時該用 client components 時的模糊性。

如何使用 supabase-nextjs 技能

安裝並啟用 supabase-nextjs

先透過你的 skill manager 執行 supabase-nextjs install 步驟，再把 agent 指到符合這套技術棧的 repo 情境。如果你的環境支援，也可以用 npx skills add alinaqi/claude-bootstrap --skill supabase-nextjs 安裝，並在要求改碼之前確認技能已成功掛載。

給技能正確的起始簡報

好的 supabase-nextjs usage 應該從具體的應用目標開始，而不是只說「幫我設定 Supabase」。要明確說明你在做什麼、哪些內容必須驗證、以及哪些資料需要讀取或寫入。好的輸入範例如下：新增 email/password 驗證、保護 /dashboard、建立 projects 資料表，並在伺服器端抓取使用者的資料列。

先讀正確的檔案

先從 SKILL.md 開始，再查看專案中的 src/app/**、src/db/** 與 supabase/**（如果存在）。在這個技能裡，最有用的實作線索通常是 server/client 的分工、auth route 的處理方式、Drizzle schema 的結構，以及任何控制 session 狀態的 middleware 或 helper 檔案。

把模糊需求翻成可用的提示詞

像「讓驗證可以運作」這種模糊需求太寬泛。更好的提示詞會明確指出路由、驗證方式、資料模型與渲染邊界，例如：在 src/app/(auth)/callback/route.ts 實作 Supabase OAuth callback 處理，dashboard 保持 server-rendered，並在登入後用 Drizzle 讀取目前使用者的 profile。 這樣的細節能讓 supabase-nextjs guide 產出的程式碼更貼近 repo，而不是多加一堆無關的骨架。

supabase-nextjs 技能 FAQ

這個 supabase-nextjs 只適合新專案嗎？

不是。supabase-nextjs 技能既可用於全新建置，也可用於在既有的 Next.js 應用中加入 Supabase 驗證或以 Drizzle 為基礎的查詢。當 repo 已經使用 App Router，或正準備遷移到 App Router 時，它的價值尤其高。

為什麼要用這個，而不是一般提示詞？

一般提示詞常常會把 client components、server components、Supabase client 使用方式，以及資料庫查詢的責任界線混在一起。supabase-nextjs 技能內建更清楚的模式，通常代表較少出錯的驗證流程、更少的 session 混亂，以及更乾淨的資料存取決策。

我需要先懂 Supabase 才能用嗎？

不一定。只要你能描述想要的流程，並接受 repo 的慣例，初學者也可以使用 supabase-nextjs skill。主要風險通常不是 Supabase 本身，而是沒有講清楚資料放在哪裡，以及哪些路由必須受保護。

什麼情況下不適合用？

如果你的應用不是 Next.js、沒有使用 Supabase 服務，或你只想要前端骨架、不需要伺服器端驗證或資料庫邏輯，就不建議使用這個技能。如果你偏好 Prisma-only 模式，或想要完全以 client-side 方式整合 Supabase，它也不是理想選擇。

如何改進 supabase-nextjs 技能

明確指定驗證與資料流

輸出最好的情況，通常來自能清楚定義誰登入、他們能看到什麼，以及資料在哪裡被抓取的輸入。舉例來說：匿名使用者可以瀏覽行銷頁，已驗證使用者可進入 /dashboard，而且所有 project 讀取都必須透過 Drizzle 在伺服器端完成。 這能幫助 supabase-nextjs 技能避免把公開邏輯和受保護邏輯混在一起。

一開始就說清楚你的技術棧邊界

先告訴 agent 你是否已經有 Supabase tables、Drizzle migrations、middleware、environment variables 或 auth routes。如果其中任何一項尚未建立，請直接說明；否則技能可能會假設專案已半套配置完成，並產出無法順利執行的程式碼。

注意常見失敗模式

最常見的錯誤包括：該用 Drizzle 查詢時卻改用 Supabase、把只能在 server 端執行的程式碼搬進 client components，以及 callback 和 middleware 行為沒有定義清楚。如果第一次結果太過泛泛，請要求更精準的版本：只處理 route、只處理 schema，或只處理驗證接線。

依照具體 repo 限制反覆調整

拿到第一版輸出後，可以再加入 file paths、命名慣例，或你希望使用 RSC、route handlers 還是 client components 等限制來改善結果。supabase-nextjs skill 最適合一次要求一個完整的垂直切面，然後再延伸到下一個路由、資料表或 session 規則。