Pourquoi l'exportation statique Suivit.js échoue-t-elle lors de la rafraîchissement de la page après avoir été déployé sur Nginx?

Explication détaillée du problème de défaillance du routage après que le site statique est déployé sur Ninx

Après avoir utilisé l'exportation statique suivante. Cet article explorera les causes et les solutions à ce problème en profondeur.

Description du problème

Supposons que vous ayez créé un projet Next.js, y compris une route /test , et configuré avec une exportation statique:

 {
  "sortie": "export"
}

Environnement de développement local (exécuter npm run dev ) Accédez localhost:3000/test Affiches normalement. Mais après le déploiement sur Nginx, l'accès /test saute sur la page d'accueil. Même si Nginx est configuré avec 404, passez à la page d'accueil:

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

Ceci est différent du mode historique de Vue.js, qui fonctionne généralement correctement dans des configurations similaires.

Analyse des problèmes

Lorsque la directive try_files de Nginx ne trouve pas le fichier routé correspondant dans le répertoire statique, il se repliera à index.html . Cela semble être comme prévu, car l'exportation statique peut ne pas générer le fichier statique pour l'itinéraire correspondant. Cependant, la cause profonde est la différence entre le mécanisme d'exportation statique de Next.js et les méthodes de traitement du routage des clients.

Solution

Pour résoudre ce problème, vous devez commencer à partir de la configuration de next.js et nginx:

1. Next.js Configuration basePath : Si votre application Next.js est déployée dans un sous-chemin (par exemple /my-app ), vous devez configurer basePath dans next.config.js :

 module.exports = {
  Basepath: «/ my-app»,
}

2. Optimisation de la configuration de Nginx: ajustez l'instruction try_files de Nginx pour le faire gérer le routage plus précisément:

 emplacement / {
    try_files $ uri $ uri / /my-app/index.html; # Si déployé sous / my-app}

Cela garantira que Nginx pointe correctement vers le fichier index.html dans le répertoire de déploiement lorsque le fichier de routage spécifié ne peut être trouvé.

3. Utilisez le serveur qui est livré avec Next.js: Évitez d'utiliser directement les fichiers statiques du service Nginx. Il est recommandé d'utiliser le serveur qui est livré avec Next.js et utiliser nginx comme proxy inversé. De cette façon, le traitement du routage est effectué par le serveur suivant.js, évitant le problème de la correspondance de fichiers statique.

4. Vérifiez les fichiers statiques générés: assurez-vous que l'exportation statique de next.js a correctement généré tous les fichiers de routage nécessaires. Vous pouvez réexporter à l'aide de la next export et vérifier la structure du répertoire généré.

Grâce à la méthode ci-dessus, vous pouvez résoudre efficacement le problème de la défaillance de la route d'exportation statique suivante. La méthode à choisir dépend de votre environnement et des exigences de déploiement spécifiques. Si possible, il est recommandé de hiérarchiser l'utilisation du propre serveur et proxy inversé de next.js, qui peut fournir un traitement de routage plus fiable.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!