対象
- Vercel や Supabase を初めて触る方
目的
- Vercel と Supabase の初期設定手順について学習する
- 前回の記事（【OutSystems】基礎編：エンティティと画面を作成する）で、作成した画面と同様の内容を Next.js で作成し、最終的に OutSystems の画面から API 連携することを目指す
以下３つの記事にて掲載予定。
- Next.js (Vercel + Supabase) の初期設定 ※本記事
- 画面や API を実装
- 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 の動作確認は次の記事で・・・）