⚡ OpenNext ローカル検証デモ
🌐 CLIENT(ブラウザ)で実行

Supabase SDK 接続

Browser と Next.js Route Handler の両方から Supabase API にアクセスします。

Client env

SUPABASE_URL: setSUPABASE_ANON_KEY: set

Server env

SUPABASE_URL: missingSUPABASE_ANON_KEY: missing

Setup SQL

Supabase Studio の SQL Editor で一度実行してください。

drop table if exists public.opennext_todos;

create table public.opennext_todos (
  id uuid primary key default gen_random_uuid(),
  user_id uuid not null default auth.uid(),
  title text not null,
  done boolean not null default false,
  created_at timestamptz not null default now()
);

alter table public.opennext_todos enable row level security;

drop policy if exists opennext_todos_select on public.opennext_todos;
drop policy if exists opennext_todos_insert on public.opennext_todos;
drop policy if exists opennext_todos_update on public.opennext_todos;
drop policy if exists opennext_todos_delete on public.opennext_todos;

create policy opennext_todos_select on public.opennext_todos
  for select to authenticated using (auth.uid() = user_id);
create policy opennext_todos_insert on public.opennext_todos
  for insert to authenticated with check (auth.uid() = user_id);
create policy opennext_todos_update on public.opennext_todos
  for update to authenticated using (auth.uid() = user_id) with check (auth.uid() = user_id);
create policy opennext_todos_delete on public.opennext_todos
  for delete to authenticated using (auth.uid() = user_id);

grant select, insert, update, delete on public.opennext_todos to authenticated;

notify pgrst, 'reload schema';

Auth

まず未ログインのまま CRUD を押して失敗することを確認し、次にメールアドレスへログイン用リンクを送ってください。

Tableopennext_todos
Roleanon

Client supabase-js

Browser から Supabase API を直接呼びます。未ログインでは失敗し、ログイン後は自分の row だけ操作できます。

Server Route Handler

Next.js Lambda 上の supabase-js から Supabase API を呼びます。ログイン済みの場合は user access token を渡します。