Next.jsのプロジェクトとSupabaseのプロジェクトをリンクさせる方法

Next.jsとSupabaseのプロジェクトは作成している前提で話を進める。

1. Next.js プロジェクトに Supabase クライアントをインストール

ターミナル

npm install @supabase/supabase-js

2. Supabase クライアントを作成

app/supabase/supabase.ts に以下を記述する

supabase.ts

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

3. 環境変数を .env.local に設定

プロジェクトフォルダ直下に.env.localを作成し、以下を記述

.env.local

NEXT_PUBLIC_SUPABASE_URL=https://xxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Supabaseのプロジェクトにアクセスし、
Project Settings -> Data API から Project URL、anon public key を取得する。
NEXT_PUBLIC_SUPABASE_URL に Project URL、
NEXT_PUBLIC_SUPABASE_ANON_KEY に anon public key をペーストする。

.env.local は Git 管理対象外にしておく。（ .gitignore に追加する。）