Warum scheitert der statische Export von Next.js, wenn er die Seite nach dem Einsatz auf Nginx erfrischt?

Detaillierte Erläuterung des Routing -Fehlerproblems nach dem nächsten.js statischen Site wird an Nginx bereitgestellt

Nachdem der statische Export von Next.js in die Bereitstellung auf dem NGINX -Server verwendet wurde, schlägt die Route bei der Aktualisierung der Seite fehl und springt auf die Homepage zurück. Dies ist ein häufiges Problem, das von vielen Entwicklern auftritt. In diesem Artikel werden die Ursachen und Lösungen für dieses Problem eingehend untersucht.

Problembeschreibung

Angenommen, Sie haben ein Next.js -Projekt erstellt, einschließlich A /test , und mit statischer Export konfiguriert:

 {
  "Ausgabe": "Exportieren"
}

Lokale Entwicklungsumgebung (Run npm run dev ) Zugriff auf localhost:3000/test Displays Normalerweise. Aber nach der Bereitstellung für NGINX springt der Zugriff /test auf die Homepage. Auch wenn Nginx mit 404 konfiguriert ist, springen Sie zur Homepage:

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

Dies unterscheidet sich vom Vue.js -Verlaufsmodus, der normalerweise in ähnlichen Konfigurationen ordnungsgemäß funktioniert.

Problemanalyse

Wenn die Anweisung der try_files von NGINX die entsprechende Routed -Datei im statischen Verzeichnis nicht finden kann, fällt sie auf index.html zurück. Dies scheint wie erwartet zu sein, da der statische Export die statische Datei für die entsprechende Route möglicherweise nicht generiert. Die Grundursache ist jedoch der Unterschied zwischen dem statischen Exportmechanismus von Next.JS und den Verarbeitungsmethoden der Client -Routing.

Lösung

Um dieses Problem zu lösen, müssen Sie mit der Konfiguration von Next.js und Nginx beginnen:

1. NEXT.JS BASEPATH next.config.js basePath : basePath Ihre nächste /my-app

 module.exports = {
  Basepath: '/my-App',
}

2. NGINX -Konfigurationsoptimierung: Passen Sie die Anweisung von try_files an, damit das Routing genauer behandelt wird:

 Standort / {
    try_files $ uri $ uri//my-app/index.html; # Wenn unter /my-App} bereitgestellt wird

Dadurch wird sichergestellt, dass Nginx im Bereitstellungsverzeichnis korrekt auf die index.html -Datei zeigt, wenn die angegebene Routing -Datei nicht gefunden werden kann.

3. Verwenden Sie den Server, der mit Next.js geliefert wird. Es wird empfohlen, den Server zu verwenden, der mit Next.js geliefert wird, und Nginx als Reverse Proxy zu verwenden. Auf diese Weise erfolgt die Routing -Verarbeitung durch den nächsten.js -Server, wodurch das Problem der statischen Dateianpassung vermieden wird.

4. Überprüfen Sie die generierten statischen Dateien: Stellen Sie sicher, dass der statische Export von Next.js alle erforderlichen Routing -Dateien korrekt generiert hat. Sie können mit dem next export erneut exportieren und die generierte Verzeichnisstruktur überprüfen.

Mit der obigen Methode können Sie das Problem des statischen Exportroutenausfalls von Next.js effektiv auf NGINX lösen, um sicherzustellen, dass Ihre statische Website alle Routing -Anforderungen korrekt behandeln kann. Welche Methode zu wählen, hängt von Ihrer spezifischen Bereitstellungsumgebung und Ihren Anforderungen ab. Wenn möglich, wird empfohlen, die Verwendung des eigenen Servers und des Reverse -Proxy von Next.js zu priorisieren, wodurch eine zuverlässigere Routing -Verarbeitung erfolgt.

Das obige ist der detaillierte Inhalt vonWarum scheitert der statische Export von Next.js, wenn er die Seite nach dem Einsatz auf Nginx erfrischt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!