Next × supabase × vercelの連携についての備忘録

はじめに

どうも保坂です。Next×vercelで作ったものをvercelでデプロイする事を前提とした環境構築の仕方を復習したかったので記事に残します。
ちなみに私はこちらを参考にさせていただきました。

supabaseのプロジェクト作成

まずはsupabaseでプロジェクトを作成します。作成画面ではプロジェクト名とDBのパスワードを設定します。（DBのパスワードは必ずメモして忘れないようにすること！）

プロジェクトを作成するとプロジェクトのホーム画面に遷移するので、サイドメニューからTable Editorを選択します。そこでTableを作成します。ちなみにできるならSQL EditorでSQLでTableを作成した方が良いと思います。

vercelプロジェクトの作成

supabaseでのTable作成までできたら、次はvercelの設定をします。

vercelでプロジェクトの作成をします。プロジェクトの作成をしようとすると大体こんな画面に来ると思います。
この画面のClone TemplateからNext.jsを選択します。

テンプレートを選択したらこの画面に来るので、ここでレポジトリ名を設定します。設定したらCreateボタンを押します。するとレポジトリが作成されてNextjsのテンプレートがクローン、コミットされた後Vercelにデプロイされます。その後、Congratulations!の画面に遷移します。

vercelとsupabaseの連携

vercelのプロジェクトを作成したらプロジェクトの管理画面からSettings -> integrationsを選択し、Browse Marketplaceを押下してsupabaseを選択します。
そこから先は画面の指示に従って自分のsupabaseのアカウントなりプロジェクトなりを選択して連携していきます。（ここから先は画像用意してなくて適当な説明になります笑）

githubからプロジェクトをクローン

vercelとsupabaseの連携ができたら、ローカル環境にgit cloneをします。
その後はもうnpm run dev や　yarn run devでプロジェクトを実行してローカルで画面表示をできます。

vercelの環境変数を取得

git cloneした後は、vercelのCLIツールでvercelにログインします。

npx vercel login

上記のようなコマンドを打つと、「Ok to proceed?」と出てくるので「y」と入力。その後にContinue with〜の選択肢が5つほど出てくるのでContinue with GitHubを選択します。

次に、Vercelプロジェクトをローカル環境にクローンしたプロジェクトにリンクします。

npx vercel link

上記コマンドを打つといくつか質問されますが、基本的にyで大丈夫です。また、リンクするプロジェクトを間違えないようにしっかり確認します。

次に環境変数をVercelプロジェクトからコピーします。

npx vercel env pull

Supabaseの環境変数をGitにあげてはいけないため、Supabaseの環境変数を含む.envファイルを.env.localに変更します。

supabaseのデータベースに接続

supase-jsのインストールと型定義のインストールを行います。

npm i @supabase/supabase-js
npm i --save-dev @types/node

その後任意のファイルを作成し、以下の内容を追加します。（以下の内容は自分で使いやすい様に編集しても良い）

import { createClient } from '@supabase/supabase-js'

export default createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)

これで準備完了。自由に開発し、githubにプッシュすると自動でビルドとデプロイがされます。とても便利や。

最後に

以上が、最初の環境構築の段階からNextjsとsupabaseとvercelを連携させる方法でした。NextjsでDB使うアプリをホスティングするならほぼこのやり方で始めれば問題なさそう。本当にsupabaseとvercelほんま便利すぎる・・・。
では今回はこの辺で。

シーユー、バイバイ👋