NextJS deployed to Vercel: 404 page not foundの解決方法【2025年最新版】

エラーの概要・症状
このエラーが発生する原因
解決方法1（最も効果的）
解決方法2（代替手段）
解決方法3（上級者向け）
エラーの予防方法
関連するエラーと対処法
まとめ

エラーの概要・症状

Next.jsをVercelにデプロイした際に、404エラーページが表示される問題は、多くの開発者が直面する一般的な課題です。このエラーは、特にサイトの訪問者が存在しないページにアクセスした場合に表示されますが、デプロイ後に正しいページが表示されない場合にも発生します。具体的な症状としては、URLを入力した際に「404ページが見つかりません」といったメッセージが表示されることが挙げられます。このエラーは、ユーザーにとって非常に困惑するもので、サイトの信頼性にも影響を与える可能性があります。特に、デプロイが成功したと考えているにもかかわらず、正しいページが表示されない場合には、開発者は深刻な問題を抱えていると感じるかもしれません。

このエラーが発生する原因

Next.jsをVercelにデプロイする際に404エラーが発生する原因は、いくつかあります。以下に主要な原因を挙げて説明します。

不適切なフレームワークプリセット: Vercelのプロジェクト設定で、Next.jsではなく「Other」が選択されている場合、正しいルーティングが機能せず404エラーが発生することがあります。これは、Vercelがリクエストを正しく処理できないためです。
サブディレクトリの誤設定: プロジェクトがサブディレクトリに配置されている場合、そのサブディレクトリの設定が正しくないと404エラーが発生することがあります。特に、サブディレクトリにNext.jsのアイコンが表示されている場合、その設定を確認する必要があります。
静的ファイルの不足: デプロイされたプロジェクトに必要な静的ファイルが含まれていない場合、特定のページにアクセスしようとすると404エラーが発生します。これは、ビルドプロセス中にファイルが正しく生成されなかった場合に起こります。
キャッシュの問題: Vercelやブラウザのキャッシュが原因で、古い情報が表示されることもあります。この場合、最新の状態に更新されていないために404エラーが出ることがあります。
ルーティングの誤設定: Next.jsのルーティングが正しく設定されていない場合も404エラーが発生します。特に動的なルーティングを使用している場合、URLとファイル構造が一致しているか確認する必要があります。

解決方法1（最も効果的）

最も効果的な解決策は、Vercelのプロジェクト設定を確認し、適切に設定を行うことです。

手順1-1（具体的なステップ）

Vercelのダッシュボードにログインし、該当するプロジェクトを選択します。
プロジェクトの設定（Settings）に移動します。
「Framework Preset」の項目を確認し、「Other」から「Next.js」に変更します。
設定を保存し、プロジェクトを再デプロイします。

手順1-2（詳細な操作方法）

プロジェクト設定で「Framework Preset」を選ぶとき、「Next.js」のオプションが表示されるはずです。それを選択することで、VercelがNext.jsの特性に基づいたルーティングを適用するようになります。
設定変更後、再デプロイが必要です。デプロイが完了したら、再度サイトにアクセスし、404エラーが解消されたか確認します。

注意点とトラブルシューティング

設定変更後、キャッシュのクリアも行ってください。ブラウザのキャッシュが古い情報を保持している場合、新しい設定が反映されないことがあります。
Vercelのダッシュボードで「Deployments」セクションを確認し、最近のデプロイが成功しているかどうかも確認しましょう。

解決方法2（代替手段）

もし上記の方法が効果がない場合、以下の手順を試してください。

プロジェクトがサブディレクトリに配置されている場合、そのディレクトリを正しく選択しているか確認します。特に、Vercelのプロジェクト設定画面で、正しいサブディレクトリが選択されているかどうかを確認してください。
サブディレクトリの選択が正しい場合、デプロイする際のビルド設定を確認します。正しいビルドコマンドが設定されているか、特に「next build」が実行されているか確認します。
変更を加えた後、再度プロジェクトをデプロイし、404エラーが解消されたか確認します。

解決方法3（上級者向け）

上級者向けの解決策として、コマンドラインを使用してデプロイ設定を確認する方法があります。以下の手順を実行してください。

ターミナルを開き、プロジェクトのルートディレクトリに移動します。
次のコマンドを実行して、ビルドとデプロイを行います。

   npm run build
   npm run deploy

これにより、ビルドエラーが発生していないか確認でき、正しくデプロイされるかをチェックできます。

エラーの予防方法

404エラーを防ぐためには、以下の対策が有効です。

**定期的なテスト**: デプロイ後にサイトが正しく動作しているか、404エラーが発生していないか定期的に確認しましょう。
**適切なルーティングの設定**: Next.jsのルーティングを正しく設定し、URLとページの構造が一致するようにしましょう。
**キャッシュ管理**: ブラウザやVercelのキャッシュを定期的にクリアすることで、古い情報が表示されるのを防ぎます。

まとめ

Next.jsをVercelにデプロイした際の404エラーは、設定ミスやサブディレクトリの選択ミスが原因で発生することが多いです。まずはプロジェクト設定を確認し、適切なフレームワークプリセットを選択することが重要です。それでも解決しない場合は、サブディレクトリの設定やビルド設定を見直すことが必要です。定期的なテストとキャッシュ管理も行うことで、404エラーを未然に防ぐことができます。これらの手順を実行することで、スムーズなデプロイと安定したサイト運営が可能になります。