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

エラーの概要・症状

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

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

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

1. 不適切なフレームワークプリセット: Vercelのプロジェクト設定で、Next.jsではなく「Other」が選択されている場合、正しいルーティングが機能せず404エラーが発生することがあります。これは、Vercelがリクエストを正しく処理できないためです。

2. サブディレクトリの誤設定: プロジェクトがサブディレクトリに配置されている場合、そのサブディレクトリの設定が正しくないと404エラーが発生することがあります。特に、サブディレクトリにNext.jsのアイコンが表示されている場合、その設定を確認する必要があります。

3. 静的ファイルの不足: デプロイされたプロジェクトに必要な静的ファイルが含まれていない場合、特定のページにアクセスしようとすると404エラーが発生します。これは、ビルドプロセス中にファイルが正しく生成されなかった場合に起こります。

4. キャッシュの問題: Vercelやブラウザのキャッシュが原因で、古い情報が表示されることもあります。この場合、最新の状態に更新されていないために404エラーが出ることがあります。

5. ルーティングの誤設定: Next.jsのルーティングが正しく設定されていない場合も404エラーが発生します。特に動的なルーティングを使用している場合、URLとファイル構造が一致しているか確認する必要があります。

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

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