La version 9.4 de Next.js, un framework servant à effectuer le rendu des applications Web React par les serveurs avec un routage côté client qui se présente comme les applications universelles natives, a été publiée ce lundi avec de nouvelles fonctionnalités. Next.js 9.4 prend en charge la régénération statique progressive, de nouvelles variables d’environnement, et une récupération intégrée améliorée. Cette version a aussi amélioré le support de Sass et a apporté d’autres fonctionnalités en version bêta. Voici un aperçu de ce dont il s’agit dans cette version.Rafraîchissement rapide
"Fast Refresh" est une nouvelle expérience de rechargement à chaud qui vous donne un retour d'information instantané sur les modifications apportées à vos composants React. Elle est maintenant activée par défaut pour tous les projets sur Next.js 9.4 ou plus récent. Le rechargement à chaud existe depuis longtemps, mais il a été trop fragile par le passé pour être activé par défaut dans votre flux de travail. Pour cette raison, Next.js a précédemment mis en œuvre une forme grossière de rechargement à chaud qui réinitialisait l'état complet de votre application.
Cette ancienne implémentation du rechargement à chaud n'était pas résistante aux erreurs de compilation ou d'exécution et elle effectuait un rechargement complet de votre application si vous faisiez une faute de frappe en éditant votre CSS ou votre JavaScript. Cela était sous-optimal et a interrompu le cours de vos pensées. Fast Refresh s'intègre profondément dans React lui-même, permettant à Next.js d'effectuer des mises à jour de précision prévisibles de votre arbre de composants React. Cela signifie que Next.js ne mettra à jour que le code du fichier que vous avez édité.
Next.js rendra uniquement ce composant, sans perdre son état. Cela inclut les styles (en ligne, CSS-in-JS ou CSS/Sass Modules), le balisage, les gestionnaires d'événements et les effets. Fast Refresh a induit pour cette version de Next.js d’autres améliorations telles que :
- la localisation précise des erreurs, résolues à la ligne et à la colonne d'origine de votre code, avant la compilation ;
- des brides de code source pertinents au contexte, avec la possibilité de cliquer pour les ouvrir dans votre éditeur ;
- la reprise de la session de développement après la correction d'une erreur de syntaxe, sans perte de l'état de l'application ;
- le rejet automatique des erreurs d'exécution non traitées quand vous corrigez l'erreur.
Régénération statique progressive (bêta)
Next.js a introduit les méthodes de génération de sites statiques à partir de la version 9.3 avec un objectif clair : bénéficier des avantages des données statiques (toujours rapides, toujours en ligne, distribuées dans le monde entier), mais en supportant parfaitement les données dynamiques, ce qui fait la réputation de Next.js. Afin d’obtenir le meilleur des deux mondes, Next.js prend en charge la génération statique incrémentielle, c'est-à-dire la mise à jour du contenu statique après que vous avez déjà fini de construire votre site.
Par exemple, Next.js 9.3 a introduit l'option “fallback : true” dans getStaticPaths, qui vous permet d'ajouter de nouvelles pages au moment de l'exécution. Désormais, Next.js prend en charge la régénération statique incrémentielle (bêta), qui est un mécanisme permettant de mettre à jour les pages existantes, en les remettant en arrière-plan à mesure de l'arrivée du trafic. Ce mécanisme garantit que le trafic est servi sans interruption, toujours de manière statique, et que la nouvelle page n'est mise en ligne qu'une fois la génération terminée.
Contrairement au RSS, la régénération statique incrémentielle vous permet de conserver les avantages de l'électricité statique :
- pas de pics de latence, les pages sont toujours servies rapidement ;
- les pages ne sont jamais déconnectées. Si la régénération de la page de fond échoue, l'ancienne page reste intacte ;
- faible charge de la base de données et du back-end. Les pages sont recalculées au maximum une fois en même temps ;
- les deux fonctionnalités incrémentielles (l'ajout de pages et la mise à jour paresseuse), ainsi que le mode de prévisualisation, sont déjà entièrement prises en charge par le prochain démarrage.
Prise en charge de nouvelles variables d’environnement
D’après l’équipe de développement du framework, les entreprises qui utilisent Next.js ont souvent fait savoir qu'il n'était pas clair quand une variable d'environnement est intégrée dans le navigateur et quand elle n'est disponible que dans l'environnement Node.js. Pour cela, Next.js 9.4 ajoute deux fonctionnalités entièrement rétrocompatibles qui contribueront à rationaliser ce processus. Premièrement, vous pouvez désormais préfixer la variable d'environnement par NEXT_PUBLIC_ dans le but d’exposer une variable d'environnement au navigateur.
Lorsque cette variable d'environnement est utilisée, elle est alors intégrée dans l'ensemble JavaScript du navigateur. Vous n'avez plus besoin d'ajouter un fichier next.config.js et d'ajouter la clé env pour exposer ces variables. Le second changement est que Next.js supporte désormais le chargement .env par défaut. Cela vous permet de définir facilement les variables de l'environnement de développement et de production. Cela va simplifier l'utilisation des variables d'environnement conformément à deux conventions.
La première, les variables d'environnement ne sont disponibles que dans l'environnement Node.js par défaut. La deuxième convention estime que les variables d'environnement qui sont préfixées par NEXT_PUBLIC_ sont exposées au navigateur.
Support Sass configurable
Selon l’équipe Next.js, quand le support intégré de Sass a été lancé dans Next.js 9.3, elle a reçu un retour d'information selon lequel un sous-ensemble d'utilisateurs voulait configurer le compilateur Sass. Par exemple, ils souhaitent configurer includePaths. Cela est maintenant possible en utilisant la touche sassOptions dans le fichier next.config.js.
Amélioration de la sortie des journaux
Next.js 9.4 a redessiné la sortie de la ligne de commande pour qu'elle soit plus cohérente et pour qu'elle fournisse moins de données en double, comme l'URL de déploiement, en attendant que le serveur de développement démarre et plus encore. L’équipe a également modifié l'espacement du type de message pour qu'il soit cohérent d'un message à l'autre, ce qui signifie qu'ils ne sautent plus d'une ligne à l'autre.
Source : Next.js 9.4
Et vous ?
Que pensez-vous des nouveautés dans Next.js 9.4 ?Voir aussi
Le framework Next.js sort en version stable pour le rendu des applications React avec un routage côté client semblable aux applications universelles Next.js 8 est maintenant disponible avec une réduction de l'utilisation de la mémoire au moment de la construction Next.js 9.3 est disponible avec la prise en charge de la génération de sites statiques et une optimisation pour les pages 404