0 基礎做一個有後端＋資料庫的網頁

幫我用 Next.js 建一個專案叫 my-guestbook，我要做一個訪客留言板：有一個留言表單，送出後留言會存起來、顯示在下面。先把專案建好、能在本機跑起來就好。

幫我裝 Supabase 的官方套件 @supabase/supabase-js，等下我要用它把留言存進資料庫。

我的 Supabase 要一張表叫 guestbook 放留言，欄位有：名字、留言內容、建立時間。給我一段 SQL，我去 Supabase 的 SQL Editor 貼上執行。記得幫我開 RLS（Row Level Security），並加上「任何人都能讀、任何人都能新增留言」的政策，也要明確 grant 讀取跟新增的權限給 anon 角色。

create table guestbook (
  id bigint generated always as identity primary key,
  name text not null,
  message text not null,
  created_at timestamptz not null default now()
);
grant select, insert on public.guestbook to anon;
alter table guestbook enable row level security;
create policy "anyone can read" on guestbook
  for select to anon using (true);
create policy "anyone can insert" on guestbook
  for insert to anon with check (true);

幫我在專案根目錄建一個 .env.local 檔，裡面放兩個環境變數 SUPABASE_URL 跟 SUPABASE_PUBLISHABLE_KEY。先用佔位值，我等下自己貼真的進去。順便確認 .gitignore 有把 .env.local 排除掉，不要被推上 GitHub。

SUPABASE_URL=https://你的專案代號.supabase.co
SUPABASE_PUBLISHABLE_KEY=sb_publishable_...（你複製的那一串）

幫我寫一個後端 API：一個負責新增留言（把名字、留言寫進 Supabase 的 guestbook 表），一個負責讀出所有留言（依時間新到舊）。連線用環境變數 SUPABASE_URL 跟 SUPABASE_PUBLISHABLE_KEY，這段程式只在伺服器端跑、不要把金鑰送到瀏覽器。也幫名字跟留言長度做基本檢查，避免空白或太長。

幫我做留言板的畫面：上面一個表單（填名字、留言、送出鈕），送出後呼叫剛剛的 API，成功就清空欄位並刷新；下面照時間新到舊列出所有留言，每則顯示名字、內容、時間。風格走乾淨簡約、暖色奶油底配金色重點，手機上也要好看。

幫我在本機把網站跑起來，告訴我打開哪個網址。我要送一則測試留言，然後重新整理頁面，確認留言還在（代表真的有存進資料庫）。

幫我把這個專案上傳到 GitHub，repo 名字叫 my-guestbook。上傳前再幫我確認一次 .env.local 沒有被包進去。

把 GitHub 上的 my-guestbook 連到 Vercel 部署，完成給我網址。

提醒我去 Vercel 設環境變數。我要在 Vercel 專案的 Settings → Environment Variables 加上 SUPABASE_URL 跟 SUPABASE_PUBLISHABLE_KEY，值跟我本機 .env.local 一樣，環境選 Production，設完要重新部署。

環境變數設好了，幫我重新部署一次，然後打開線上網址，我要送一則留言確認線上版本真的能存進資料庫。