【supabase】Nextjs+supabaseの環境を構築したい

はじめに
事前準備
早速、環境構築してみる
まとめ

はじめに

今回は、BaaSツールであるSupabaseを使用する環境構築をしてみたいと思います。

Supabase | The Open Source Firebase Alternative

Build production-grade applications with a Postgres database, Authentication, instant APIs, Realtime, Functions, Storage...

事前準備

今回は、Nextjsプロジェクトを作成して環境構築したうえで、データベースについて、supabese環境を構築していくような構成とします。

ですので、事前にNextjsプロジェクトの作成が必要となりますので、以下を参考に環境を作成しておきます。

早速、環境構築してみる

Nextjsのプロジェクトフォルダが作成されていると思いますので、任意のターミナルを開いて以下のコマンドから実行していきます。

初期化

supabase環境を初期化します。

必要なファイルがプロジェクトフォルダにインポートされます。

$ bunx supabase init
Generate VS Code settings for Deno? [y/N] N
Generate IntelliJ Settings for Deno? [y/N] N
Finished supabase init.

Supabase CLI | Supabase Docs

The Supabase CLI provides tools to develop your project locally and deploy to the Supabase Platform.

実行環境作成

DB構築するための環境を作成します。

$ bunx supabase start
15.1.1.41: Pulling from supabase/postgres
〜省略〜
Started supabase local development setup.

         API URL: <http://127.0.0.1:54321>
     GraphQL URL: <http://127.0.0.1:54321/graphql/v1>
  S3 Storage URL: <http://127.0.0.1:54321/storage/v1/s3>
          DB URL: postgresql://postgres:postgres@127.0.0.1:54322/postgres
      Studio URL: <http://127.0.0.1:54323>
    Inbucket URL: <http://127.0.0.1:54324>
〜省略〜

実行環境作成に失敗する場合

もし別の作業で実行している場合は該当のデフォルトポートが使用中でエラーになる場合があります。その際は、以下のコマンドで該当プロジェクトのsupabaseをストップしましょう。

$ bunx supabase stop --project-id your-project

Supabase CLI reference - Stop all containers

Stop all containers

ダッシュボードにアクセス

Studio URLにアクセスすると以下のようなGUIダッシュボードが確認できます。

認証設定

以下を参考に認証の設定をしていきます。

Setting up Server-Side Auth for Next.js | Supabase Docs

必要なパッケージをインストールします。

$ bun add @supabase/supabase-js @supabase/ssr

bun add v1.1.6 (e58d67b4)

 installed @supabase/supabase-js@2.43.1
 installed @supabase/ssr@0.3.0

 16 packages installed [3.73s]

プロジェクトフォルダのルートに移動して.env.localファイルを作成します。

$ cd your-project
$ touch .env.local

作成したファイルに以下を記述します。

NEXT_PUBLIC_SUPABASE_URL=<your_supabase_project_url>
NEXT_PUBLIC_SUPABASE_ANON_KEY=<your_supabase_anon_key>

your_supabase_project_urlは、bunx supabase start した際の出力結果のAPI URLを、your_supabase_anon_keyはanon keyを入力します。

クライアント設定

Supabaseにアクセスするための設定をしていきます。

以下のようにディレクトリとファイルを作成します。

$ cd lib
$ mkdir supabase && cd supabase
$ touch client.ts

以下の内容を記述します。

import { createBrowserClient } from '@supabase/ssr'

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  )
}

同様に同じディレクトリにもう一つファイルを作成して、以下の内容を記述します。

$ touch server.ts

import { createServerClient, type CookieOptions } from '@supabase/ssr'
import { cookies } from 'next/headers'

export function createClient() {
  const cookieStore = cookies()

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        get(name: string) {
          return cookieStore.get(name)?.value
        },
        set(name: string, value: string, options: CookieOptions) {
          try {
            cookieStore.set({ name, value, ...options })
          } catch (error) {
            // The `set` method was called from a Server Component.
            // This can be ignored if you have middleware refreshing
            // user sessions.
          }
        },
        remove(name: string, options: CookieOptions) {
          try {
            cookieStore.set({ name, value: '', ...options })
          } catch (error) {
            // The `delete` method was called from a Server Component.
            // This can be ignored if you have middleware refreshing
            // user sessions.
          }
        },
      },
    }
  )
}

まとめ

今回は、短いですが基本的なSupabaseの設定を進めてみました。

次回以降で実際にテーブルを作成する等試していきたいと思います！

最後までご覧いただきありがとうございました。