Supabaseの認証アプリの構築(Next.js)

$npx create-next-app@latest . --typescipt --eslint

TailwindCSS:×

src/:○

Approuter: ○

import alias: No

npm i @hookform/resolvers @supabase/auth-helpers-nextjs @types/uuid@9.0.1 encoding react-hook-form uuid@9.0.0 zod zustand

volta: 18.18.0を使う

.env.local

NEXT_PUBLIC_SUPABASE_URL

NEXT_PUBLIC_SUPABASE_ANON_KEY

※ダッシュボードのプロジェクト設定から持ってくる

npx supabase login

アクセストークンを生成

右ターミナルへ入力

npm supabase init

npx supabase link --project-ref リファレンスID

プロジェクト設定/一般(パスワードが必要)

libを作る

npx supabase gen types typescript --linked > lib/database.types.ts

next.config.json

serveraction

domains

リファレンスIDを使う

ミドルウェア

アプリ各リクエスト処理が実行されるまでに先に実行される

認証情報を取る処理を入れる

cookieでsupabaseクライアント

セッションを取得

レイアウトにリスナーコンポーネント

※常に認証状態を監視

サーバサイドでの実行

リスナーの配置

セッションをナビゲーションに渡す

ナビゲーションはクライアントコンポーネント