Next.jsとSupabaseを接続する

前提

ここではsupabaseで予めプロジェクトを作成してあることを前提として説明しています。
プロジェクトの作成が完了したら、settings -> APIに行き、プロジェクトURLとproject API keys内のanon keyをコピーする。

.envファイルの作成

vscode上で.envファイルを作成し、その中で以下のように代入する。

NEXT_PUBLICを指定すると、その値をクライアントサイドからも参照することが可能になる。
言い換えると、console.logで値が確認できてしまうため、機密性の高いデータはサーバーサイドで管理する。

.env

NEXT_PUBLIC_SUPABASE_URL='project url'
NEXT_PUBLIC_SUPABASE_ANON_KEY='anon key'

別ファイルでcreateClient作成

createClientを作成することで、supabaseのあらゆる機能を利用するエントリポイントとなる。

supabaseClient.ts

import { createClient } from "@supabase/supabase-js";

const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL!;
const SUPABASE_ANON_KEY = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;

export const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

process.envとimport.meta.env

process.env

process.envは、node.js上で動作するアプリケーションの環境変数を定義するためのオブジェクトで、Next.jsが提供している様々な機能もnode.js上で動作しているので、process.envを使用して、APIやDBなどの接続を行う。

import.meta.env

import.meta.envフロントエンドで環境変数を定義するときに使用する。
ViteやReactを使用して、node.js上で環境変数を参照するアプリケーションが存在しない場合にこれを使用する