supabaseを使ったプロダクトをVercelにデプロイするときに困った話

Error: supabaseUrl is required.

趣味で個人開発をしていた時に遭遇したエラーメッセージです。
環境と解決方法を記載していきます。

解決方法

まず最初に解決方法です。
今回は環境変数をVercelでも設定する必要がありました。

VercelのPJのダッシュボードに移動して

1. Setting
2. Environment Variables

からそれぞれsupabaseのURLとANON KEYを追加します。

なんでこんなめんどくさいことしないといけないの？

普段のdev環境だと、ローカルに.env.localファイルなどを作成して変数を設定しています。
(私もこの時同じようにしていました)

私のようにまだ規模が極小の個人開発をしている段階では特に必要性を感じられないかも知れせんが、チーム開発をしてる場合だと話が別です。

開発環境の他に、テスト環境、本番環境などさまざまな環境があります。
つまりそれぞれで使うAPIやDBが異なってくる場合がほとんどだと思います。

そのようなときに柔軟に管理できるようにするために、上記のような仕様になっているわけですね。

環境

今回紹介したエラー遭遇時の開発環境や使用言語などを一応記載しておきます。
OS : Mac
React 18.2.0
Next.js ver14.0.4
supabase 2.39.0