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

Comment écrire du code qui n'est exécuté que sur un côté de votre pile: frontend ou backend

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.

Téléchargez mon gratuitManuel Next.js


Plus de prochains tutoriels: