🐷

SupabaseとNext.jsを使った開発をするまで

2024/04/21に公開

Next.js

supabase

tech

最近GAとなったSupabaseを使ってNext.jsでアプリを作るための開発環境を作っていきます。

いちばん簡単な方法

実はSupabaseがGAになったタイミングで、公式より Supabase Bootstrap というものが提供されています。

これを使うとコマンド1つでSupabaseとNext.jsの開発環境が構築できます。

supabase bootstrap
npx supabase@latest bootstrap
bunx supabase@latest bootstrap

bunx supabase@latest bootstrap
Enter a directory to bootstrap your project (or leave blank to use /home/user/dev): test

    Which starter template do you want to use?

    1. embeddings [AI Inference in Supabase Edge Functions.]
  >  2. nextjs [A Next.js App Router template configured with cookie-based auth.]
    3. expo [An Expo React Native User Management starter.]
    4. flutter [A Flutter User Management starter.]
    5. swift [A Swift User Management starter.]
    6. rbac [A Next.js RBAC Slack clone starter.]
    7. @basejump/nextjs [A Next.js starter with personal accounts, teams, permissions and Stripe billing]
    8. scratch [An empty project from scratch.]

こちらのコマンドについての詳細はSupabaseのブログに記載されています。

Supabaseをローカルで立ち上げるために必要な準備も済んでいるので正直これで十分です。

手動で作る方法

前述の方法とは別に、何かしらの理由で手動で開発環境を構築したい方は以下の手順で環境構築できます。

Next.jsのプロジェクトを作成

bunx create-next-app@latest -e with-supabase

おなじみの create-next-app でプロジェクトを作成します。

Supabaseの準備

今回は開発環境なのでローカルでSupabaseを立ち上げる準備を行います。

ドキュメントはこちら:

ドキュメントにも記載がありますが、Dockerが動作する必要があるので、Docker Desktop等のインストールを行ってください。

bunx supabase@latest init

こちらのコマンドでプロジェクトルートに supabase というディレクトリが出来上がります。

bunx supabase@latest start

上記のコマンドでローカルにSupabaseが立ち上がります。
最初はイメージのダウンロードが行われるので少し時間がかかります。

Supabaseが立ち上がると、開発に必要な値が表示されます。

Started supabase local development setup.

         API URL: http://127.0.0.1:54321
     GraphQL URL: http://127.0.0.1:54321/graphql/v1
          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
      JWT secret: super-secret-jwt-token-with-at-least-32-characters-long
        anon key: eyJ.......
service_role key: eyJ.......

ここに表示されている Studio URL がSupabaseの管理画面です。
見慣れた画面が表示されると思います。

Next.jsでSupabaseを使う

Next.jsでSupabaseを使うためのやり方も細かくドキュメントに記載があります。

上記を参考に、Supabaseのクライアントをインストールして、設定を行います。

SUPABASE_URL と SUPABASE_ANON_KEY は先程の supabase start で表示された値を使います。

まとめ

ほんの数週間前までは手動で環境構築をしていたのでこの記事をまとめてましたが、SupabaseがGAになり、Bootstrapが提供された今、僕はおそらく手動で構築することはなくなるんじゃないかなと感じています。

もちろん、Bootstrapを使わずに手動で構築することも可能ですし、その方がより理解が深まると思います。

とは言いつつSupabaseを完全に使いこなせているわけでもないのでこれを期にもっと勉強していきたいと思います。

ありがとうございました。