Next.js: exécutez le code uniquement côté serveur ou côté client dans Next.js

Dans les composants de votre page, vous pouvez exécuter du code uniquement côté serveur ou côté client, mais en vérifiant lewindowbiens.

Cette propriété n'existe que dans le navigateur, vous pouvez donc vérifier

if (typeof window === 'undefined') {
}

et ajoutez le code côté serveur dans ce bloc.

De même, vous ne pouvez exécuter du code côté client qu'en cochant

if (typeof window !== 'undefined') {
}

Astuce JS: nous utilisons letypeofici car nous ne pouvons pas détecter une valeur indéfinie d'une autre manière. On ne peut pas faireif (window === undefined)car nous obtiendrions une erreur d'exécution «la fenêtre n'est pas définie»

Next.js, en tant qu'optimisation au moment de la construction, supprime également le code qui utilise ces vérifications des bundles. Un bundle côté client n'inclura pas le contenu encapsulé dans unif (typeof window === 'undefined') {}bloquer.

Plus de prochains tutoriels:

• Premiers pas avec Next.js
• Next.js vs Gatsby vs create-react-app
• Comment installer Next.js
• Lier deux pages dans Next.js à l'aide de Link
• Contenu dynamique dans Next.js avec le routeur
• Flux de données vers un composant Next.js à l'aide de getInitialProps
• Styliser les composants Next.js à l'aide de CSS
• Pré-extraire du contenu dans Next.js
• Utilisation du routeur pour détecter le lien actif dans Next.js
• Afficher la source pour confirmer que SSR fonctionne dans Next.js
• Next.js: remplissez la balise head avec des balises personnalisées
• Déployer une application Next.js maintenant
• Next.js: exécutez le code uniquement côté serveur ou côté client dans Next.js
• Déployer une application Next.js en production
• Comment analyser les bundles d'applications Next.js
• Modules de chargement paresseux dans Next.js
• Ajout d'un composant wrapper à votre application Next.js
• Les icônes ajoutées par Next.js à votre application
• Les offres groupées d'applications Next.js
• Comment utiliser le routeur Next.js
• Comment utiliser les routes d'API Next.js
• Comment obtenir des cookies côté serveur dans une application Next.js
• Comment changer le port d'une application Next.js