Supabaseをセットアップする
このページで学ぶこと
- Supabase とは何かがわかる
- Supabase プロジェクトを作成できる
- Next.js と Supabase を接続できる
Supabase とは
Supabase は オープンソースの Firebase 代替として知られるバックエンドサービスです。
PostgreSQL データベース、認証、ストレージなどが最初から使えます。
このコースで使う主な機能
- PostgreSQL データベース（Prisma からアクセスする）
- Supabase Auth（認証）
やってみよう
ステップ1: Supabase アカウントを作る
supabase.comにアクセス- 「Start your project」をクリック
- GitHub アカウントでサインアップ
ステップ2: 新しいプロジェクトを作る
- ダッシュボードで「New project」をクリック
- 以下を入力する
- Name:
my-app（任意の名前） - Database Password: 強力なパスワードを設定する（メモしておく！）
- Region:
Northeast Asia (Tokyo)を選ぶ
- Name:
- 「Create new project」をクリック
- プロジェクトの作成に1〜2分かかります
Database Password は必ずメモしておきましょう。
Prisma からDBに接続するときに必要です。後から確認できません。
ステップ3: 接続情報を確認する
プロジェクトが作成されたら、接続情報を確認します。
- 左メニューの「Settings」→「Database」をクリック
- 「Connection string」の「URI」タブを選ぶ
postgresql://...で始まるURLをコピーする（[YOUR-PASSWORD]の部分は後で自分のパスワードに置き換える）
また、API の設定も確認します。
- 左メニューの「Settings」→「API」をクリック
- 「Project URL」と「anon public」キーをメモする
ステップ4: .env ファイルに設定を書く
Next.js プロジェクトのルートに .env ファイルを作成する（または既存のものを編集）。
# .env
# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://xxxxxxxxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGci...（anonキーをそのまま貼る）
# データベース接続文字列（Prismaが使う）
DATABASE_URL=postgresql://postgres.xxxx:[YOUR-PASSWORD]@aws-0-ap-northeast-1.pooler.supabase.com:5432/postgres
NEXT_PUBLIC_プレフィックスについて
NEXT_PUBLIC_がついた環境変数はブラウザ側のコードでも読めます。
SupabaseのURLとanonキーはフロントエンドから直接Supabaseにアクセスするために必要なため、NEXT_PUBLIC_をつけます。
DATABASE_URLはサーバー側（Prisma）でしか使わないのでつけません。
.env を .gitignore に追加するのを忘れずに（前の章で学びましたね）。
ステップ5: Supabase クライアントをインストールする
npm install @supabase/supabase-jsステップ6: Supabase クライアントを初期化する
lib/supabase.js を作成する。
// lib/supabase.js
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)Supabase ダッシュボードの使い方
Supabase には便利な管理画面があります。
| メニュー | 用途 |
|---|---|
| Table Editor | テーブルの内容をスプレッドシートのように確認・編集できる |
| SQL Editor | SQLを直接実行できる |
| Authentication | ユーザー一覧・設定 |
| Settings → Database | 接続文字列の確認 |
確認しよう
- Supabase プロジェクトを作成した
- Database Password をメモした
-
.envにDATABASE_URL・NEXT_PUBLIC_SUPABASE_URL・NEXT_PUBLIC_SUPABASE_ANON_KEYを設定した -
.envを.gitignoreに追加した -
npm install @supabase/supabase-jsを実行した
AIに聞いてみよう
「Supabaseのanon keyとservice_role keyの違いを教えてください。それぞれどんな場面で使いますか？」
次のステップ
Last updated on