Next.js ✖️ SupabaseプロジェクトのVercelへのデプロイメモ

Supabaseで新しいプロジェクトを作成する（ここは割愛します）

各テーブル作成や、確認用のテストレコードを追加します

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

勉強中のUdemy Next.jsの動画内で紹介されていたバージョンを参考にしました。
(動画はこちら👉https://www.udemy.com/course/nextjs-supabase-web-tailwindcss/ )
react-queryは@3.34.19を推奨されていましたが、それだと依存関係で怒られてしまったため、
バージョンが近く比較的ダウンロード数が多かった@3.39.0を試しに入れてみると怒られなくなりました！

npx create-next-app todo-app
npm install @supabase/supabase-js@1.33.3
npm install react@18.0.0
npm install react-dom@18.0.0
npm install react-query@3.39.0
npm install zustand@3.7.1

GitHubで新しいリポジトリ作成

プロジェクトにenv.local作成

こちらにSupabaseの環境変数を設定してください。

env.local

リポジトリとローカルのプロジェクトを紐づける

下記コマンドでGitHubとプロジェクトを紐付け、pushまで行う。

echo "# next-supabase-todo" >> README.md
git init
git add -all
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/xxxxx/next-supabase-todo.git
git push -u origin main

Vercelでデプロイ①

対象のプロジェクトをimportします。
import画面

Vercelでデプロイ②

[Environment Variables]を押して、環境変数を設定します。
NAMEにはenv.localで設定したNEXT_PUBLIC_SUPABASE_URLとNEXT_PUBLIC_SUPABASE_API_KEYを設定し、VALUEにはそれぞれに対応するProjectURLとAPI　keyを設定します。
*
Addを押すと新しく入力項目が追加されます。

Vercel Environment Variables画面

Supabaseの環境変数であるProjectURLとAPI keyはSettingsのAPIタブを選択すると確認できます。

Supabase Settings画面

完了✨

デプロイしたURLで動作確認してください。

大まかな流れ

• Supabaseでプロジェクト作成
• コードエディタでプロジェクト作成、Supabaseの環境変数を設定する
• SupabaseのDBからデータが取得できるか確認
• GitHubのリポジトリと連携
• Vercelからインポート
• 環境変数設定してデプロイ

さいごに

Vercelのホスティングを使えば、Next.js✖️Supabaseのプロジェクトも簡単にデプロイできました！
ぜひ試してみて下さい。