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

対象

• Vercel や Supabase を初めて触る方

目的

• Vercel と Supabase の初期設定手順について学習する
• 前回の記事（【OutSystems】基礎編：エンティティと画面を作成する）で、作成した画面と同様の内容を Next.js で作成し、最終的に OutSystems の画面から API 連携することを目指す

以下３つの記事にて掲載予定。

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/

今回は「Continue with GitHub」を選択し、GitHub と Vercel を連携。
これで、 GitHub に Push すると、自動で Vercel にデプロイされる。

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

Vercel 上で Clone Template > Next.js を選択すると、GitHub 上にリポジトリが作成される。

リポジトリが作成されると同時に、 Vercel へのデプロイも完了する。
(現時点では Next.js の初期ページ)

3. Supabase のアカウントを作成

Supabase を使うと簡単にデータベースを作成・管理できる。
こちらも Free プランなら無料！
https://supabase.com/

GitHub と連携する。

4. Supabase のプロジェクトを作成

Supabase の画面から New Project を選択し、プロジェクトを作成する。

5. Vercel と Supabase の連携

Vercel の画面で、 Settings > Integrations > Browse Marketplace ボタンを押す。

Supabase を検索し、連携を行う。

6. 動作確認

GitHub から Clone し、ローカルで動かす。

npm install
npm run dev

localhost:3000 で画面確認。

app/page.tsx を適当に変更し、 Push する。

localhost はもちろん、 Vercel 上の公開サイトも自動デプロイされることを確認できる。

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