Next.jsでsupabaseにつなげる際の手順をまとめました。Next.jsの公式ドキュメントにもデータベースの設定があるのですが、ドキュメント通りだと難しいところがあるので、そこも補足します。
Next.js公式ドキュメント
https://nextjs.org/learn/dashboard-app/setting-up-your-database
２つの繋ぎ方
つなぎ方には下記2つがあるのですが、公式ドキュメントでは前者を進めています。ただ実運用をする上ではちゃんとsupabaseとVercelがどうつながるのかと言うことを理解したほうがいいと思うので、今回は校舎で説明していきます。
- Vercelのインテグレーションボタン
- supabaseとvercelを個別で設定し、環境変数で設定
前準備
- supabaseのアカウント、プロジェクト作成
- Vercelのアカウント作成
ライブラリインストール
npm install @supabase/supabase-js上記でライブラリをnext.jpにインストール。
環境変数の設定
NEXT_PUBLIC_SUPABASE_URL=your_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key
POSTRES_URL：これはseedを入れる際に必要上記の環境変数を設定します。POSTGRES_URLは直接DBを編集するためのもので、これはseedを入れる際に使います。
クライアント初期化
import { createClient } from '@supabase/supabase-js'
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
if (!supabaseUrl) {
throw new Error('Missing env.NEXT_PUBLIC_SUPABASE_URL')
}
if (!supabaseKey) {
throw new Error('Missing env.NEXT_PUBLIC_SUPABASE_ANON_KEY')
}
export const supabase = createClient(supabaseUrl, supabaseKey)このファイルは、Supabaseクライアントを初期化してエクスポートするモジュールです。
1. インポート文
escript
import { createClient } from ‘@supabase/supabase-js’
Supabase JavaScriptクライアントライブラリから createClient 関数をインポートしています。
2. 環境変数の取得
escript
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY- NEXT_PUBLIC_SUPABASE_URL: SupabaseプロジェクトのURL
- NEXT_PUBLIC_SUPABASE_ANON_KEY: Supabaseの匿名（公開）キー
NEXT_PUBLIC_ というプレフィックスにより、Next.jsがこれらの環境変数をクライアント側でも利用可能にします。
3. 環境変数の検証
if (!supabaseUrl) {
throw new Error(‘Missing env.NEXT_PUBLIC_SUPABASE_URL’)
}
if (!supabaseKey) {
throw new Error(‘Missing env.NEXT_PUBLIC_SUPABASE_ANON_KEY’)
}環境変数が設定されていない場合、アプリケーションの起動時にエラーを投げて、問題を早期に発見できるようにしています。
4. Supabaseクライアントの作成とエクスポート
export const supabase = createClient(supabaseUrl, supabaseKey)取得したURLとキーを使用してSupabaseクライアントを作成し、他のモジュールから使用できるようにエクスポートしています。
seedする
- placeholder-data.tsにシードデータがはいっている下記urlにアクセスするとDBにデータが入る
- この時使用されるのはPOSTRES_URL。NEXT_PUBLIC_SUPABASE_URLは読み込み専用
pnpm run dev-
http://localhost:3000/seedアクセス