Kenapa Eksport Statik Seterusnya. Gagal apabila menyegarkan halaman selepas dikerahkan pada Nginx?

Penjelasan terperinci mengenai masalah kegagalan penghalaan selepas tapak statik next.js dikerahkan ke nginx

Selepas menggunakan eksport statik Next.js untuk digunakan ke pelayan Nginx, laluan gagal apabila menyegarkan halaman dan melompat kembali ke laman utama, yang merupakan masalah biasa yang dihadapi oleh banyak pemaju. Artikel ini akan meneroka sebab -sebab dan penyelesaian kepada masalah ini secara mendalam.

Penerangan Masalah

Katakan anda telah membuat projek Next.js, termasuk A /test Laluan, dan dikonfigurasikan dengan Eksport Statik:

 {
  "Output": "Eksport"
}

Persekitaran Pembangunan Tempatan (Run npm run dev ) Akses localhost:3000/test Memaparkan Biasanya. Tetapi selepas menyebarkan ke NGINX, akses /test melompat ke laman utama. Walaupun Nginx dikonfigurasi dengan 404, lompat ke laman utama:

 lokasi / {
    try_files $ uri $ uri / /index.html;
}

Ini berbeza dengan mod sejarah Vue.js, yang biasanya berfungsi dengan baik dalam konfigurasi yang sama.

Analisis masalah

Apabila arahan try_files nginx tidak dapat mencari fail yang dialihkan yang sepadan dalam direktori statik, ia akan kembali ke index.html . Ini seolah -olah seperti yang dijangkakan, kerana eksport statik tidak dapat menghasilkan fail statik untuk laluan yang sepadan. Walau bagaimanapun, punca akar adalah perbezaan antara mekanisme eksport statik next.js dan kaedah pemprosesan penghalaan klien.

Penyelesaian

Untuk menyelesaikan masalah ini, anda perlu bermula dari konfigurasi Next.js dan nginx:

1. Next.js basePath Configuration: Jika aplikasi seterusnya.js anda digunakan dalam subpath (contohnya /my-app ), anda perlu mengkonfigurasi basePath di next.config.js :

 modul.exports = {
  BasePath: '/my-app',
}

2. Pengoptimuman Konfigurasi Nginx: Laraskan arahan try_files nginx untuk menjadikannya mengendalikan penghalaan dengan lebih tepat:

 lokasi / {
    try_files $ uri $ uri//my-app/index.html; # Jika dikerahkan di bawah /my-app}

Ini akan memastikan bahawa Nginx betul menunjuk ke fail index.html dalam direktori penempatan apabila fail penghalaan yang ditentukan tidak dapat dijumpai.

3. Gunakan pelayan yang dilengkapi dengan Next.js: Elakkan menggunakan fail statik perkhidmatan nginx secara langsung. Adalah disyorkan untuk menggunakan pelayan yang dilengkapi dengan Next.js dan menggunakan Nginx sebagai proksi terbalik. Dengan cara ini, pemprosesan penghalaan dilakukan oleh pelayan Next.js, mengelakkan masalah pemadanan fail statik.

4. Semak fail statik yang dihasilkan: Pastikan eksport statik Next.js telah menghasilkan semua fail penghalaan yang diperlukan. Anda boleh mengeksport semula menggunakan arahan next export dan menyemak struktur direktori yang dihasilkan.

Melalui kaedah di atas, anda dapat menyelesaikan masalah kegagalan laluan eksport statik Next.js pada Nginx, memastikan laman web statik anda dapat mengendalikan semua permintaan penghalaan dengan betul. Kaedah yang mana untuk dipilih bergantung pada persekitaran dan keperluan penggunaan khusus anda. Jika boleh, adalah disyorkan untuk mengutamakan penggunaan pelayan sendiri dan proksi terbalik, yang dapat memberikan pemprosesan penghalaan yang lebih dipercayai.

Atas ialah kandungan terperinci Kenapa Eksport Statik Seterusnya. Gagal apabila menyegarkan halaman selepas dikerahkan pada Nginx?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!