做網站
進階
做網站

用 AI 做會員制網站：Next.js + Supabase 登入與資料庫

做一個有註冊登入、每個人只看得到自己資料的網站，重點放在資料庫權限（RLS）不出錯。
2 小時
6 步
免費方案即可開始
編
AI 有解編輯部
最後更新 2026 年 11 月 4 日・CC BY 4.0
用到的工具
Next.js
Claude Code
Vercel
會員網站最容易出事的地方不是畫面，而是「別人能不能讀到你的資料」。這篇用 Supabase 的列層級安全（Row Level Security, RLS）把關。
你需要準備
•
已完成〈用 AI 寫程式代理從零做出第一個工具〉
•
Supabase 帳號、GitHub 帳號
•
想做的網站，例如「個人讀書筆記」
進度 0／6
1

建立 Supabase 專案

1.
在 supabase.com 建立專案，記下 Project URL 與 anon key（Project Settings → API）。
2.
service_role key 只能放在伺服器端，絕對不能出現在瀏覽器程式碼。
2

建資料表並開啟 RLS

在 SQL Editor 執行：
SQL
create table notes ( id uuid primary key default gen_random_uuid(), user_id uuid not null references auth.users on delete cascade default auth.uid(), title text not null, body text not null default '', created_at timestamptz not null default now() ); alter table notes enable row level security; create policy "只能看自己的筆記" on notes for select using (user_id = auth.uid()); create policy "只能新增自己的筆記" on notes for insert with check (user_id = auth.uid()); create policy "只能改自己的筆記" on notes for update using (user_id = auth.uid()); create policy "只能刪自己的筆記" on notes for delete using (user_id = auth.uid());
3

讓 AI 代理建立網站

提示詞
用 Next.js（App Router）與 @supabase/supabase-js 做一個讀書筆記網站： - Email 魔法連結登入、登出 - 登入後列出自己的筆記，可以新增、編輯、刪除 - Supabase URL 與 anon key 從環境變數讀取 - 不要使用 service_role key 請先列出檔案結構與計畫，等我確認。
4

本機測試權限

開兩個瀏覽器（或一個用無痕模式），註冊兩個帳號，各新增筆記，確認互相看不到。這一步就是在驗證 RLS。
5

部署到 Vercel

1.
把專案推到 GitHub。
2.
在 vercel.com 匯入儲存庫，設定環境變數（Supabase URL 與 anon key）。
3.
到 Supabase 的 Authentication → URL Configuration，把正式網址加進允許的重新導向網址。
6

上線前安全檢查

•
Supabase 的 Security Advisor 沒有警告（例如某張表沒開 RLS）。
•
搜尋程式碼確認沒有 service_role 字樣出現在前端。
•
註冊頁有基本防濫用（Supabase 可開 CAPTCHA）。
你照著做成功了嗎？
成為第一個回報的人。你的回報會決定攻略排序與作者分潤。
下一步
想自己架主機而不是用雲端平台：見〈用 Docker 部署網站並加上 HTTPS〉。
收錄在學習路線
廣告版位
想讓正在用 AI 的人看到你的產品？了解廣告合作
問與答
卡住的地方、補充的做法都可以留在這裡
還沒有人留言。
更多「做網站」攻略