Nginxに展開された後、ページを更新するときにnext.js静的エクスポートが失敗するのはなぜですか？

next.jsの後のルーティング障害の問題の詳細な説明静的サイトがnginxに展開されます

next.jsの静的エクスポートを使用してNginxサーバーに展開すると、ページを更新するとルートが失敗し、ホームページに戻ります。これは、多くの開発者が遭遇する一般的な問題です。この記事では、この問題の原因と解決策を詳細に調査します。

問題の説明

A /testルートを含む次の.JSプロジェクトを作成し、静的エクスポートで構成したとします。

 {
  「出力」：「エクスポート」
}

ローカル開発環境（Run npm run dev ）アクセスlocalhost:3000/test正常に表示されます。しかし、Nginxに展開した後、アクセス/testホームページにジャンプします。 Nginxが404で構成されている場合でも、ホームページにジャンプしてください。

位置 / {
    try_files $ uri $ uri / / index.html;
}

これは、通常、同様の構成で適切に機能するVue.jsの履歴モードとは異なります。

問題分析

nginxのtry_filesディレクティブが静的ディレクトリ内の対応するルーティングファイルを見つけることができない場合、 index.htmlに戻ります。静的エクスポートは対応するルートの静的ファイルを生成しない可能性があるため、これは予想通りのようです。ただし、根本的な原因は、next.jsの静的エクスポートメカニズムとクライアントルーティング処理方法の違いです。

解決

この問題を解決するには、next.jsとnginxの構成から開始する必要があります。

1. next.js basePath構成： next.jsアプリケーションがサブパス（ /my-appなど）に展開されている場合、 next.config.jsでbasePathを構成する必要があります。

 module.exports = {
  ベースパス： '/my-app'、
}

2. nginx構成の最適化： Nginxのtry_files命令を調整して、ルーティングをより正確に処理できるようにします。

位置 / {
    try_files $ uri $ uri//my-app/index.html; ＃ /my-appの下に展開されている場合}

これにより、指定されたルーティングファイルが見つからないときに、nginxが展開ディレクトリ内のindex.htmlファイルを正しく指します。

3. next.jsに付属のサーバーを使用してください： nginxサービスの静的ファイルを直接使用しないでください。 next.jsに付属のサーバーを使用し、nginxを逆プロキシとして使用することをお勧めします。このようにして、ルーティング処理はnext.jsサーバーによって行われ、静的ファイルマッチングの問題を回避します。

4. 生成された静的ファイルを確認してください： next.jsの静的エクスポートが必要なすべてのルーティングファイルを正しく生成したことを確認してください。 next exportコマンドを使用して再輸出し、生成されたディレクトリ構造を確認できます。

上記の方法を使用して、Nginxのnext.js静的エクスポートルート障害の問題を効果的に解決し、静的Webサイトがすべてのルーティングリクエストを正しく処理できるようにすることができます。選択する方法は、特定の展開環境と要件に依存します。可能であれば、より信頼性の高いルーティング処理を提供できるnext.js独自のサーバーとリバースプロキシの使用を優先することをお勧めします。

以上がNginxに展開された後、ページを更新するときにnext.js静的エクスポートが失敗するのはなぜですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。