Next.js×Supabase×Vercel連携について

# はじめに
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/24bc682c-25f1-ecc9-18f5-915b02a89b0f.jpeg"  width="150" height="186" />.
こんにちは！[かほ](https://twitter.com/kaho_eng)です♪
WEBCAMP ENGINEER COMMUNITYのアドカレ21日目を担当します！
現在、本業ではエンジニア業務と技術広報業務に従事しています。
エンジニア業務ではReact/Next.jsを用いたフロントエンド開発に関わる機会が多いのですが、

「業務外でNext.jsを使って簡単にアプリを作る方法はないかなぁ🤔」

と探していたところ、supabase×vercelを使って高速でアプリ作成ができる方法を知りました！
本記事では、簡単なsupabaseの紹介からVercel、GitHub連携で自動ビルド・デプロイできるまでの過程についてご紹介します。(Next.jsのコードについては開発途中のため、今回は割愛します🙇‍♀️)

# この記事の読者対象
・supabaseを今後使ってみたい方
・Next.jsを使って高速でアプリを作りたい方

# そもそもsupabaseってなんぞや？
そもそもsupabaseを知らない人が多いと思うので簡単にご紹介。
![スクリーンショット 2022-12-21 19.03.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/c829465c-4031-dbd6-7012-ec06385f694f.png)
supabaseは2020年から提供されている**BaaS**で**Firebaseの代替品**と言われています。機能面としては主に下記の4点です。
* Database
* Authentication
* Storage
* Edge Functions

Firebaseとの大きな違いとしては、データベースが挙げられるでしょう。
Firebaseは**NoSQL**ベースのFirestore、supabaseは**Postgres**ベースのRDBとなります。そのためsupabaseはFirebaseのRDBバージョンとも言われています。

https://supabase.com/

# supabaseのプロジェクトを作成しよう！
ではさっそくsupabaseのプロジェクト作成から説明します。

supabaseにはGitHub認証でログインした後、「**New Project**」ボタンを押してプロジェクトの作成を行います。
**Organization**・**Name**・**Database Password**・**Region**の設定を行い、設定が終わったら**Create new project**のボタンを押しましょう♪
![IMG_9645.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/c313d63b-0de6-adf7-7738-fab715d9e8a0.jpeg)

プロジェクト作成後はホーム画面にリダイレクトするため、ホーム画面の左サイドバーメニューの**SQL Editor**を開き、**New query**ボタンを押します。

今回はとりあえずToDoアプリを作成するという仮定で行うため、テーブル名を「todos」としました。カラムとしてはID、タイトル、完了済み、作成時間をカラムに設定。
![スクリーンショット 2022-11-13 19.09.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/35ed50e3-f5d7-f3ae-b8c3-875b4f373056.png)

その後、画像右下の「**RUN**」ボタンを押してクエリを実行します。
エラーが発生していなければ**Success. No rows returned**が表示され、todosテーブルの作成が完了しているはずです。

下記画像のようにサイドバーの**Tables**でテーブルの作成が確認できます。
![スクリーンショット 2022-11-13 19.29.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/84a566d6-48e3-bce7-7860-9262fcba8ddf.png)



# vercelプロジェクトの作成とGitHub連携をしよう！
次にvercelプロジェクトを作成について説明します。
Vercelダッシュボードの「**New Project**」ボタンを押した後、
今回はNext.jsのアプリを作りたいため「**Clone Template**」の**Next.js**のテンプレートを選びましょう。
![IMG_9647.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/cfb2db97-f6a8-7316-49fc-0d5b6e886b89.jpeg)

**Create Git Repository**の画面が出てきます。「**Git Scope**」には自分のアカウント名を「**Repository Name**」にはレポジトリ名を自由につけます。Gitリポジトリをプライベートにしたい場合は下の**Create private Git Repository**にチェックを入れて下さい。
![スクリーンショット 2022-12-13 0.50.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/c2865480-bebc-cbbf-a1c6-0a0ef09af3c9.png)

「**Create**」を押すとGitHubリポジトリーの作成とNext.jsのプロジェクトがクローン、コミットされた後Vercelにデプロイされます。デプロイ完了後は**Conglatulations**の画面にリダイレクトされ紙吹雪が舞います笑。
![PNGイメージ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/bf8196cd-0ca9-231e-a51c-d5dd4e55eb20.png)

# VercelとSupabaseを連携しよう！
作成したプロジェクト画面から**Settings**に移動し、**Integrations**の**Browse Marketplace**を押します。Supabaseを検索し、Supabaseのインテグレーションを選びましょう。
![スクリーンショット 2022-12-13 1.42.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/7e31a94f-449a-260e-34c0-aa54ba9677f8.png)

「**Add Integration**」を押して、supabaseを統合するアカウントとプロジェクトを選択。**CONTINUE**を押します。
![スクリーンショット 2022-12-13 1.46.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/525d9b12-f0cc-c509-fcd2-659eb34191fc.png)

Vercel上で作成したプロジェクトとSupabaseで作成したデータベースをそれぞれ選択して「**Add Integration**」のボタンを押します。
![スクリーンショット 2022-12-13 1.51.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/66f43fe8-7fc3-439d-d0af-1044e566ba3d.png)

# GitHubのリポジトリをクローンしよう！
先ほど作成したリポジトリをターミナル上でgit cloneしてきましょう。
**npm run dev**のコマンドを押すと
http://localhost:3000　　　　
でNext.jsテンプレートと同じプロジェクトが表示されるようになります。

# Vercelの環境変数を取得しよう！
次にVercelのCLIツールを使ってVercelにログインします。
```
npx vercel login
```
上記のようなコマンドを打つと、「Ok to proceed?」と出てくるので「y」と入力。その後にContinue with〜の選択肢が5つほど出てくるのでContinue with GitHubを選択しましょう。
![IMG_9652.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/cecf5452-b980-c7a7-02c0-d89f0d2dfb7c.jpeg)


次に、Vercelプロジェクトをローカル環境にクローンしたプロジェクトにリンクします。下記のコマンドを打ちましょう。
```
npx vercel link
```
該当するプロジェクトがセットアップ対象になっている場合は、yを打ちます。
![IMG_9655.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/441327c4-c5f8-4625-108e-3425175bf63f.jpeg)


環境変数をVercelプロジェクトからコピーするために下記のコマンドを打ちましょう。
```
npx vercel env pull
```
![IMG_9653.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/6659f674-7d5a-3585-f5e2-5b277e64f8b7.jpeg)

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

# Supabaseのデータベースに接続しよう！
supase-jsのインストールと型定義のインストールを行いましょう。
```
npm i @supabase/supabase-js
npm i --save-dev @types/node
```
その後/utils/supabase.jsという新しいファイルを作成し、以下の内容を追加します。
```
import { createClient } from '@supabase/supabase-js'

export default createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)
```
これにてデータベースを操作する準備が完了しました！
あとはコードの編集を行いGitHubにプッシュさえすれば、自動でビルド・デプロイをしてくれます。
# 余談
無料版のSupabaseを1週間ほど放置していましたが、使用しないと自動停止します（paused状態になる）。"Restore project"ボタンをクリックして完了かと思いきや、下記のような画像が出てきてリストア（再開）まで待ちました。
![CB5316AB-FEA6-48FE-AFB2-83ACDDF9D16B.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/870c0b06-8618-b8a5-e726-48af30d39e87.jpeg)
データベースはデモ用に作ったとても小さいサイズのものでしたが、
リストア完了のメッセージが表示されるまでに2〜3分、その後Next.jsアプリからアクセスできるようになるまで2〜3分ほど待ち時間がありました。Supabaseを使うならスリープしないよう、定期的なアクセスが必要かもしれません。

# 最後に
supabaseのデータ作成が簡単な点、VercelとGitHubの連携で自動ビルド・デプロイができる点を踏まえて、Next.jsでの開発に集中しやすいのではないかと思うのでぜひお試しください〜(スリープしすぎないように注意を)。ではでは！

Twitterアカウント:https://twitter.com/kaho_eng

# 参考資料
https://www.supabase.jp/docs/guides/integrations/vercel