対象

目的

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

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

Vercel を使うと、簡単＆高速に Web サイトを公開することができる。
Hobby プランなら無料！
https://vercel.com/

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

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

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

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

GitHub と連携する。

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

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

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

npm install
npm run dev

localhost:3000 で画面確認。

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

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

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