Skip to Content
ドキュメントWebコースバックエンド・DBSupabaseをセットアップする

Supabaseをセットアップする

このページで学ぶこと

  • Supabase とは何かがわかる
  • Supabase プロジェクトを作成できる
  • Next.js と Supabase を接続できる

Supabase とは

Supabase は オープンソースの Firebase 代替として知られるバックエンドサービスです。
PostgreSQL データベース、認証、ストレージなどが最初から使えます。

このコースで使う主な機能

  • PostgreSQL データベース（Prisma からアクセスする）
  • Supabase Auth（認証）

やってみよう

ステップ1: Supabase アカウントを作る

  1. supabase.com にアクセス
  2. 「Start your project」をクリック
  3. GitHub アカウントでサインアップ
  4. 初回サインアップ時は、organization と project の作成を求められる
    • Organization Name: 任意の名前でOK
    • Plan: Free を選ぶ

ステップ2: 新しいプロジェクトを作る

  1. ダッシュボードで「New project」をクリック (初回サインアップ時はこの操作をせずともプロジェクト作成画面に遷移します)
  2. 以下を入力する
    • Name: todo-app（任意の名前）
    • Database Password: 強力なパスワードを設定する（メモしておく！）
    • Region: Northeast Asia (Tokyo) を選ぶ
    • Enable Data API: ON（有効）
      • Supabase の REST API を使うための設定です。
      • @supabase/supabase-js を使う場合は ON のままでOKです。
    • Automatically expose new tables and functions: OFF（無効）推奨
      • 新しいテーブルや関数を自動公開しない設定です。
      • 意図しない公開を防ぐため、学習中でも OFF 推奨です。
    • Enable automatic RLS: OFF（無効）
      • 新規テーブルにRLSを自動で付ける設定です。
      • この章では Prisma を中心に進めるため、まずは OFF で進めて問題ありません（認証を扱う章でRLSを学びます）。
  3. 「Create new project」をクリック
  4. プロジェクトの作成に1〜2分かかります

Database Password は必ずメモしておきましょう。
Prisma からDBに接続するときに必要です。後から確認できません。

ステップ3: 接続情報を確認する

プロジェクトが作成されたら、接続情報を確認します。

まずはDBの接続文字列を確認しましょう。

  1. ダッシュボード上部の「Connect」をクリック
  2. 「ORMs」から Prisma を選ぶ
  3. 「DIRECT_URL」をコピーする（[YOUR-PASSWORD] の部分は先ほど設定したDBパスワードに置き換える）

次に、Supabase 全体の API にアクセスするためのURLとキーを確認します。

  1. ダッシュボード上部の「Connect」をクリック
  2. 「Framework」タブで「Next.js」を選択し、「Project URL」と「Publishable key（sb_publishable_...）」を確認してメモする

APIキーの作成・削除・ローテーション（切り替え）は、左メニューの「Settings」→「API Keys」から行えます。

ステップ4: .env ファイルに設定を書く

Next.js プロジェクトのルートに .env ファイルを作成してください（すでにある場合はそれを編集してください）。

# .env

# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://xxxxxxxxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=sb_publishable_xxxxxxxxxxxxx

# データベース接続文字列（Prismaが使う）
DATABASE_URL=postgresql://...（Connect でコピーして [YOUR-PASSWORD] の部分を置き換えた文字列）
plaintext

NEXT_PUBLIC_ プレフィックスについて
NEXT_PUBLIC_ がついた環境変数はブラウザ側のコードでも読めます。
SupabaseのURLとpublishable keyはフロントエンドから直接Supabaseにアクセスするために必要なため、NEXT_PUBLIC_ をつけます。
DATABASE_URL はサーバー側（Prisma）でしか使わないのでつけません。

.env を .gitignore に追加するのを忘れずに（前の章で学びましたね）。

ステップ5: Supabase クライアントをインストールする

Next.js から Supabase にアクセスするためのライブラリをインストールします。

npm install @supabase/supabase-js
bash

ステップ6: Supabase クライアントを初期化する

lib/supabase.js を作成します。

// lib/supabase.js
import { createClient } from '@supabase/supabase-js'
 
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
const supabasePublishableKey = process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY
 
export const supabase = createClient(supabaseUrl, supabasePublishableKey)
javascript

Supabase ダッシュボードの使い方

Supabase には便利な管理画面があります。

メニュー用途
Table Editorテーブルの内容をスプレッドシートのように確認・編集できる
SQL EditorSQLを直接実行できる
Authenticationユーザー一覧・設定
Connect（画面上部）Project URL・Publishable key・接続文字列の確認
Settings → API KeysAPIキーの作成・削除・ローテーション

確認しよう

  • Supabase プロジェクトを作成した
  • 初回サインアップ時に organization を作成し、Plan を Free にした
  • Database Password をメモした
  • Security 設定（Data API / expose / automatic RLS）を確認した
  • 「Connect」から Prisma 用の接続文字列をコピーした
  • 「Connect」で Project URL と Publishable key を確認した
  • .env に DATABASE_URL・NEXT_PUBLIC_SUPABASE_URL・NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY を設定した
  • .env を .gitignore に追加した
  • npm install @supabase/supabase-js を実行した

AIに聞いてみよう

「SupabaseのPublishable keyとSecret keyの違いを教えてください。それぞれどんな場面で使いますか？」

次のステップ

→ PrismaでDBを操作する

Last updated on
DBスキーマを設計しようPrismaでDBを操作する