最近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を完全に使いこなせているわけでもないのでこれを期にもっと勉強していきたいと思います。
ありがとうございました。