🌐

Vercel × Next.jsのデプロイで慌てないためのチェックリスト

に公開
Next.js
Vercel
frontend
tech

はじめに

数ヶ月おきに「よし、Vercelで簡単なモックサイトやアプリ作ろう！」と思い立つものの、
毎回のように同じところで引っかかって、しばらく悩む…というのを繰り返しています。

さすがに学習効率が悪いなと思ったので、
自分がよくハマる「2大焦りポイント」とチェックリストを作ってみました。

この記事はほぼ未来の自分向けですが、
Vercel初学者としてつまずきやすいポイントをまとめているので、
誰かの役にも立てばいいなと思っています。

焦りポイント①リポジトリが表示されない

リポジトリとVercelの設定で、すべてのリポジトリではなく「個別に指定」して行っている場合。

行うこと

  1. GitHubのアカウント設定を開く（https://github.com/settings/）
  2. 「Applications」（https://github.com/settings/installations） に行く
  3. 連携しているところにVercelがあるかどうかを確認。（初めて行う場合はここにVercelがいないかも）
  4. Vercelがあったら右側の「Configure」を押す
  5. Vercelのページみたいなのが開くので一番下までスクロール
  6. 「Repository access」というのがあるので、全部のリポジトリを選べるようにしてしまいたいなら「All repositories」。まだ個別にしておきたいなら「Only select repositories」のままで「Select repositories」からVercelに追加したいリポジトリを選択する
  7. 設定を保存すると、場合によっては自動的にVercelの画面に戻る
    （戻らない場合は手動でVercelに戻ってOK）
  8. 「Add New」ボタンを押し、「Import Git Repository」から追加したリポジトリを探す

焦りポイント②デプロイしたら「404: NOT_FOUND」が出た


こういうやつ

Next.js+Vercelの場合、404が出る原因はいくつかあるが、
自分がハマったのは主に次のパターン。

CVE-2025-66478対策

Next.jsの脆弱性（CVE-2025-66478）が関連しています。
特定の Next.js バージョン（例：一部の 15.x / 16.x 系）では、ローカルではbuildが成功しても、Vercel側で脆弱性検知によりデプロイが停止される。という問題。
ビルド状況のログで

Error: Vulnerable version of Next.js detected, please update immediately. Learn More: https://vercel.link/CVE-2025-66478

みたいなのが出てたらバージョンが原因。


こんな感じで止まっているはず。

なので、package.jsonを開いてバージョンを確認する。
15系でも一部のバージョンは対象になるため、Next.jsのバージョン変更（アップ／ダウン）が必要になる場合があります。
対応方法の一例として、下記の記事が参考になりました。
https://zenn.dev/divsawa/articles/20251211_nextjs-incident

Vercel側の設定もれ


Framework Settingsでそもそも「Next.js」になっていない可能性がある。

Root Directoryの設定

package.jsonが置いてあるディレクトリに指定していない。
Vercelはpackage.jsonを置いてある階層を見てデプロイ・ビルドしているので、ここの設定が違っていると404になる。

特にmonorepo構成や、hoge/hogeのようにディレクトリが二重になっている場合は要注意。

Vercelに反映するブランチにマージしていない（空の状態など）

Root Directoryの設定であるあるなのが、VercelでProductionとして設定されているブランチ（mainやdevelop）にアプリのコードが存在しない場合、404になる。

Discussion