はじめに
こんにちは。elephantnodeと申します。
普段は都内で社内情シス+Web系エンジニアとして業務しています。
Next.jsとsupabaseを使ったアプリをVercelでデプロイして開発・公開する方法で、最もスマートな手順は、Vercelを起点にしたやり方で、
1. VercelでNext.jsのテンプレートを使ってプロジェクトを作成
2. Vercelと連携したGithubのレポジトリからローカルへNext.jsをClone
3. VercelからSupabaseのインテグレーションを使って、Supabaseプロジェクトを作成
4. ローカルのNext.jsでVercelから環境変数を取得
この方法になると思います。
こちらのQiitaの記事で丁寧に解説されていて、今でも度々参考にさせていただいています。本当に感謝。
ですが、実際にはこんな状況ではないでしょうか。
- すでにNext.jsのアプリがローカルにある
- Supabaseのプロジェクトは作成済み
- VercelとSupabaseの連携が新しくなって操作方法がわからない
Next.jsやSupabaseのドキュメントやサンプルを参考にして作成したプロジェクトを、Vercelへデプロイしたい時に、なかなか手順が見えなかったりします。
そこでローカルで作成したNext.jsアプリをGithub経由でVercelへデプロイして、VercelとSupabaseを連携する際の手順をまとめてみました。
ここでは
Next.jsやSupabase、Vercel、Githubを知っている方で、各サービスはすでにアカウント作成済みの方を対象としています。またnpmやgitなどのインストールなども割愛しています。
package.json
作成時のプロジェクトのモジュールです。
{
"dependencies": {
"react": "^19.0.0",
"react-dom": "^19.0.0",
"next": "15.3.2"
},
"devDependencies": {
"typescript": "^5",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"@tailwindcss/postcss": "^4",
"tailwindcss": "^4",
"eslint": "^9",
"eslint-config-next": "15.3.2",
"@eslint/eslintrc": "^3"
}
}
Supabaseのプロジェクトを作成
まずはSupabaseのプロジェクトを作成します。すでに作成済みの場合は次の手順へ。
ローカル環境にNext.jsをセットアップ
ローカルでターミナルからプロジェクト用のフォルダに移動して、Next.jsをセットアップします。ここも作成済みの方は次の手順へ。
npx create-next-app@latest nextjs-myapp
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
Creating a new Next.js app in /Users/so/01_project/ens/nextjs-myapp.
Using npm.
Initializing project with template: app-tw
Installing dependencies:
- react
- react-dom
- next
Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- @tailwindcss/postcss
- tailwindcss
- eslint
- eslint-config-next
- @eslint/eslintrc
added 389 packages, and audited 390 packages in 22s
139 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Initialized a git repository.
Success! Created nextjs-myapp at ***フォルダパス***/nextjs-myapp
特に設定はいじらず、Enterで設定しています。今回のアプリ名はnextjs-myappにしておきます。
まずは起動チェックします。
cd nextjs-myapp
npm run dev
おなじみのスタート画面が表示されました。これをVercelにGithub経由でデプロイしていきます。
Githubにアプリをpush
Githubにリポジトリを作成します。
Next.jsのアプリはすでに.gitignoreの設定もされているので、ローカルでコミット後に、リモートリポジトリを追加すればすぐにGithubへPushできます。
Githubのガイダンスどおり、ターミナルで先程のNext.jsのmyappにリモートリポジトリを追加します。
git remote add origin git@github.com:elephantnode/nextjs-myapp.git
git branch -M main
git push -u origin main
Enumerating objects: 22, done.
Counting objects: 100% (22/22), done.
Delta compression using up to 10 threads
Compressing objects: 100% (21/21), done.
Writing objects: 100% (22/22), 65.41 KiB | 7.27 MiB/s, done.
Total 22 (delta 0), reused 0 (delta 0), pack-reused 0
To ensgithub.com:elephantnode/nextjs-myapp.git
* [new branch] main -> main
branch 'main' set up to track 'origin/main'.
Githubにpushできました。
Vercelでプロジェクトを作成
Vercelで新規にプロジェクトを作成します。
Add NewからProjectを選択。
GithubとVercelを連携していれば、先程作成したリポジトリが画面に表示されているので、Importに進みます。、まだGithubと連携がなければすぐ上のプルダウンメニューからAdd Github Accountを選んでアカウントを追加してください。
Deployしてしばし待ちます。
Vercelでプロジェクトが作成され、サイトが公開されました。
プロジェクトのダッシュボードでDomainsのURLをクリックすれば、デプロイされたNext.jsアプリを確認できると思います。
VercelとSupabaseを連携
Vercelのプロジェクト画面で、settings>integrationsへ進み、Browse Marketplaceをクリックします。
supabaseで検索し、Supabaseが表示されたらクリック。
右上の「Install」はSupabaseに新しくプロジェクトを作成しますので、挙動が異なります。Supabaseにプロジェクトを新規に作成したくない場合は、Install部分以外をクリックします。
この画面のInstallはSupabaseでアカウントを作成するか、既存のアカウントと接続するかを選択できます。ここで、Link Existing Supabase Accountを選択します。
SupabaseにどのVercelプロジェクトを連携させるか選択できます。先ほど作成したプロジェクトを選択して、Connect Accountをクリックします。
ブラウザで既にSupabaseにログインしていれば、supabase側の連携画面が開くので、Organizationを選択して、Install integrationをクリックします。
*ログインしていなければログインが表示されます。
今度はSupabase側で、どのSupabaseプロジェクトとVercelプロジェクトを紐づけるかの画面が出てくるので、それぞれ作成したプロジェクトを選択し、プロジェクトを連携させます。
連携が完了すると、VercelプロジェクトのIntegrationsにSupabaseが表示されるようになり、以後はConfigureから連携先のSupabaseプロジェクトを開くことができるようになります。
またManage AccessからはSupabaseとVercelのプロジェクトを、All Projectsと紐づけるか、個別に紐づけるかを再設定できます。
VercelでSupabaseの環境変数を確認
ここまで進めると、Vercelのプロジェクト画面でSettings>Enviromentsを開くと、Enviroments Variablesにsupabaseの各種環境変数が設定されているのを確認できます。
もし表示されていない場合は、Supabase側の設定を確認してください。
先程のVercelのCongigureからSupabase側の設定画面を開いて、プロジェクトが正しく設定されているかを確認してみてください。またSupabaseで環境変数を変更した場合も、ここから再度同期できます。（同期は未確認ですが）
ローカル環境のNext.jsアプリでVercelとSupabaseの環境変数をダウンロード
最後にVercelから連携しているSupabaseの環境変数をローカルのNext.jsにダウンロードする方法です。
すでにSupabaseのガイドなどで.env.localをNext.jsに設置している方は不要ですが、anonkeyをコピペしないで設置できるので、間違えてアプリと一緒に外部へ公開してしまうリスクを減らせる方法です。
Vercelには便利なCLIが用意されています。
Next.jsの開発元はVercelなので、アプリのインストール時にすでにCLIが組み込まれています。そのため、アプリのディレクトリでnpxを使用して、node_modulesにある、Vercel CLIを利用できます。
最初にアプリのディレクトリでターミナルから、下記のコマンドでVercelにログインします。
npx vercel login
Ok to proceed? (y) y
Vercel CLI 41.6.2
? Log in to Vercel (Use arrow keys)
❯ Continue with GitHub
Continue with GitLab
Continue with Bitbucket
Continue with Email
Continue with SAML Single Sign-On
─────────────────────────────────
Cancel
? Log in to Vercel Continue with GitHub
> Success! GitHub authentication complete for so@elephantnode.com
Congratulations! You are now logged in. In order to deploy something, run `vercel`.
💡 Connect your Git Repositories to deploy every branch push automatically (https://vercel.link/git).
ここではVercelのログイン方法を選択します。それぞれを選ぶと別窓が開いて、Vercelのログイン画面になります。ログインに成功すると、Vercel Cli Login Successが表示されます。
私の場合Githubだったので、開いたところ、すでにログイン済みでした。
ログインができたので、次にプロジェクトをリンクさせます。
npx vercel link
Vercel CLI 41.7.4
? Set up “~/01_project/ens/nextjs-myapp”? yes
? Which scope should contain your project? murodon's projects
? Found project “murodons-projects/nextjs-myapp”. Link to it? yes
✅ Linked to murodons-projects/nextjs-myapp (created .vercel)
設定するアプリのディレクトリを確認し、リンク先のプロジェクト名を確認、プロジェクト候補が表示されるので、正しければYes（違っていたら、正しいプロジェクト名を入力）し、リンクさせます。
次に環境変数をVercel CLIで確認します。
npx vercel env ls
Vercel CLI 41.7.4
> Environment Variables found for murodons-projects/nextjs-myapp [152ms]
name value environments created
SUPABASE_URL Encrypted Production 10m ago
SUPABASE_SERVICE_ROLE_KEY Encrypted Production 10m ago
SUPABASE_JWT_SECRET Encrypted Production 10m ago
NEXT_PUBLIC_SUPABASE_ANON_KEY Encrypted Production 10m ago
NEXT_PUBLIC_SUPABASE_URL Encrypted Production 10m ago
POSTGRES_URL Encrypted Production 10m ago
POSTGRES_PRISMA_URL Encrypted Production 10m ago
POSTGRES_URL_NON_POOLING Encrypted Production 10m ago
POSTGRES_USER Encrypted Production 10m ago
POSTGRES_HOST Encrypted Production 10m ago
POSTGRES_PASSWORD Encrypted Production 10m ago
POSTGRES_DATABASE Encrypted Production 10m ago
SUPABASE_ANON_KEY Encrypted Production 10m ago
Environmentsと設定されている環境変数の情報が表示されます。ここでのenvironmentsは環境変数ではなく、Preview、Developmentなどのプロジェクトの状態です。
コマンドのオプションで、--environmentsにproductionを指定して、環境変数をPullします。
npx vercel env pull --environment=production
このコマンドでアプリのトップディレクトリにSupabaseとVercelの各種環境変数を含んだ.env.localファイルが作成されます。
supabaseの環境変数をローカルで取得できました。このURLとANON_KEYでsupabaseを開発していきます。
またこのNext.jsの環境であれば、Vercel側もSupabaseのanonkeyとURLが設定された状態で利用できるので、githubのリポジトリにアップロードすれば、そのままSupabaseと繋ぐことができます。
構築環境を消す手順
最後にここまで作成したプロジェクトの削除手順についてご紹介します。
最初にSupabase側の連携から削除します。
SUpabase側のVercel連携設定はプロジェクト単位ではなくて、アカウント単位で管理されています。そのため、Supabaseのプロジェクト内にあるIntegrationsではなくて、プロジェクトやTeamの管理画面のIntegrationsを選択します。
Manage > Delete connectionから連携を削除していきます。
次にVercel側のIntegrationsからSupabaseのIntegrationsのManage > Settingsに進みます。
一番下段のUninstall Integrationを選択。
これで連携は解除できました。
あとは、VercelのプロジェクトのSettingsからDelete ProjectでVercelのプロジェクトを削除。
SupabaseはProject SettingsからDelete Projectで削除しましょう。
Githubのリポジトリも不要であれば削除しておきましょう。またローカルのNext.jsも不要な.env.localは削除しておいたほうが良いと思います。
VercelでインストールしたSupabaseアカウントの場合
なお、VercelでInstallを選んで、Supabaseに作成したプロジェクトは、連携の設定を解除するまで、Supabaseの管理画面から消せなくなります。（Vercel側は削除可能）
Vercel側でプロジェクトを削除したり、IntegrationをアンインストールしてもSupabase側の設定は残るため、一瞬どこで解除できるのか不明になります。
その場合はSupabase側のVercel Integrationに設定が残っていることがありますので、そちらの設定を解除してください。
おわりに
Next.jsやSupabase、Vercelなどは本当に変化が早く、技術系サイトで解説されている記事もすぐに手順が古くなり、そのままでは動かないケースが増えています。
最近はChatGPTなど生成AIのお陰で、すぐにトラブルシューティングができるので、ありがたいのですが、たまに廃止ずみのコンポーネントを案内されるなど、手戻りも多いと感じました。
この記事も来年にはどうなっているか分かりませんが、過去記事を超えていく、今の誰かの助けになればいいなと思います。
この記事はNext.jsとSupabase UI LibraryでGoogleの認証を使ってログインできるアプリケーションの構築手順の解説の前半でした。
次回はそちらで。