【Vercel × Supabase】基礎編：プロジェクトの作成～デプロイ

# 対象
- Vercel や Supabase を初めて触る方

# 目的
- Vercel と Supabase の初期設定手順について学習する
- 前回の記事[（【OutSystems】基礎編：エンティティと画面を作成する）](https://qiita.com/taka_junkstory/items/08b9c7eb496ac9ce9d81)で、作成した画面と同様の内容を Next.js で作成し、最終的に OutSystems の画面から API 連携することを目指す
:::note info
以下３つの記事にて掲載予定。
1. Next.js (Vercel + Supabase) の初期設定 ※本記事
2. 画面や API を実装
3. OutSystems から、2で作成した API を呼び出す
:::

# 使用するツールやアカウントなど
- Node.js v20.14.0
- GitHub
- Vercel
- Supabase

# 手順

###  1. Vercel のアカウントを作成
Vercel を使うと、簡単＆高速に Web サイトを公開することができる。
Hobby プランなら無料！
https://vercel.com/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/a37dc45f-db42-0894-989a-26a747411827.png)

今回は「Continue with GitHub」を選択し、GitHub と Vercel を連携。
これで、 GitHub に Push すると、自動で Vercel にデプロイされる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/2c84c51d-5c7d-4683-5b5e-bb94913ba32c.png)
<img width=500 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/87f6275a-923d-dc09-84fc-e24a09e9c370.png" />

###  2. Next.js のプロジェクト作成
Vercel 上で Clone Template > Next.js を選択すると、GitHub 上にリポジトリが作成される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/8b4102e9-ed04-f87c-8096-e1862d9be8ed.png)

リポジトリが作成されると同時に、 Vercel へのデプロイも完了する。
(現時点では Next.js の初期ページ)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/28c3f46b-c891-17ed-22e1-091822ec5291.png)

###  3. Supabase のアカウントを作成
Supabase を使うと簡単にデータベースを作成・管理できる。
こちらも Free プランなら無料！
https://supabase.com/
<img width=500 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/e0ab666a-b8fc-474d-e4d0-ee8550a754a2.png" />

GitHub と連携する。
<img width=500 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/047d71f4-5567-20a2-aca1-68ee8cbb81e0.png" />

###  4. Supabase のプロジェクトを作成
Supabase の画面から New Project を選択し、プロジェクトを作成する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/9a0c1e49-fa60-4db9-dbd8-3d11c2c1f4a4.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/d6e83bfb-f75d-9b36-77ce-96484fb3c130.png)

###  5. Vercel と Supabase の連携
Vercel の画面で、 Settings > Integrations > Browse Marketplace ボタンを押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/ab670076-b086-67ff-d31a-a30b89ce96b6.png)

Supabase を検索し、連携を行う。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/1acc6733-f720-6483-4fb5-fc0c15bcf07a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/e5e513c0-e9fa-d073-96cb-a73a9c16fde0.png)

###  6. 動作確認
GitHub から Clone し、ローカルで動かす。
```
npm install
npm run dev
```
localhost:3000 で画面確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/e4485ce3-27b3-5284-cdcb-04be40ddd6f1.png)

app/page.tsx を適当に変更し、 Push する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/480bfd03-6245-4f52-57ad-f1a0bb1a0299.png)

localhost はもちろん、 Vercel 上の公開サイトも自動デプロイされることを確認できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3804213/ed6c868f-de02-7ec7-ee49-b9f03de73784.png)

（Supabase の動作確認は次の記事で・・・）