Correction de l'erreur window is not defined dans Next.js avec Leaflet

Le problème

L'erreur ⨯ node_modules\leaflet\dist\leaflet-src.js (230:18) @ window ⨯ ReferenceError: window is not defined survient lorsqu'on essaie d'utiliser Leaflet, une bibliothèque JavaScript pour les cartes interactives, dans un environnement Next.js en raison de son fonctionnement basé sur l'objet window du navigateur, qui n'est pas disponible en SSR.

Solution

La solution consiste à utiliser le chargement dynamique de Next.js avec l'option { ssr: false } pour s'assurer que Leaflet est uniquement chargé et exécuté côté client.

Étapes :

• Installation de Leaflet : Assurez-vous que Leaflet est installé dans votre projet.

npm install leaflet 

• Utilisation de dynamic de Next.js :

• Importez la fonction dynamic de Next.js.
• Créez un composant dynamique pour LeafletMap en désactivant le rendu côté serveur.

import dynamic from 'next/dynamic'; // Composant LeafletMap chargé dynamiquement 

const LeafletMap = dynamic( () => import('./_components/map/LeafletMap'), { ssr: false } ); 

• Utilisation de LeafletMap dans votre composant :

  • Utilisez le composant LeafletMap dans votre composant ou page Next.js comme d'habitude.

const MyPage = () => ( <div> <h1>Ma Carte Leaflet</h1> <LeafletMap /> </div> ); 

En suivant ces étapes, vous pouvez intégrer Leaflet dans votre application Next.js sans rencontrer l'erreur window is not defined. Cette méthode garantit que Leaflet est chargé uniquement côté client où l'objet window est disponible, évitant ainsi les problèmes liés au rendu côté serveur.

N'hésitez pas à adapter ces instructions à votre configuration spécifique et à explorer d'autres aspects de Next.js et Leaflet pour enrichir votre application web.

Ressources Supplémentaires

• Documentation Next.js
• Documentation Leaflet