Next.js 9.3 est disponible avec la prise en charge de la génération de sites statiques

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

Next.js est un framework React pour le rendu côté serveur, mais il ne se limite pas à cela. Il est présenté par ses créateurs comme une chaîne d'outils à configuration zéro et à commande unique pour les applications React. Il fournit une structure commune qui vous permet de construire facilement une application frontale React, et gère de manière transparente le rendu côté serveur pour vous. La version 9.3 de Next.js a été publiée ce lundi avec de nouvelles fonctionnalités et quelques améliorations. Voyons ci-dessous quelques nouveautés de cette version.

Prise en charge de la génération des sites statiques

Avec la sortie de Next.js 9.0, le framework a introduit le concept d'optimisation statique automatique. Lorsqu'une page n'a pas d'exigences de blocage de la récupération des données comme getInitialProps, elle sera automatiquement rendue en HTML au moment de la construction. Il existe d'autres cas où vous pouvez vouloir rendre une page en HTML statique au moment de la construction, et cela même avec des exigences d'extraction de données bloquantes. C'est le cas, par exemple, des pages de marketing alimentées par un système de gestion de contenu (CMS).

Pièce jointe 544779

Next.js 9.3 introduit deux nouvelles méthodes de récupération de données : getStaticProps et getServerSideProps. Ces nouvelles méthodes présentent de nombreux avantages par rapport au modèle getInitialProps, car il existe une distinction claire entre ce qui deviendra SSG (Static Side Generation) et SSR (Server Side Rendering). Elles sont des ajouts d'API. Toutes les nouvelles fonctionnalités sont rétrocompatibles et peuvent être adoptées progressivement. Il n’y a aucune dépréciation et getInitialProps continue à fonctionner normalement. Un paramètre getStaticPaths a été ajouté pour obtenir un routage dynamique.

• getStaticProps : vous permet d’obtenir des données lors de la construction ;
• getStaticPaths : vous permet de spécifier le routage dynamique en fonction des données ;
• getServerSideProps : vous permet d’obtenir des données pour chaque demande.

Prise en charge du mode aperçu

L'introduction de getStaticProps dans Next.js ouvre de nouvelles possibilités comme l'exploitation des capacités de rendu à la demande de Next.js sous certaines conditions. Par exemple, lors de la prévisualisation d'un brouillon de votre CMS, vous voudrez contourner le rendu statique et faire un rendu à la demande de la page avec le contenu du brouillon au lieu du contenu publié. Vous voudriez que Next.js contourne la génération statique uniquement dans ce cas précis. Selon l’équipe de Next.js, le mode aperçu vous permet de faire cela.

Le mode aperçu (mode de prévisualisation) permet aux utilisateurs de contourner la page générée statiquement pour rendre à la demande (SSR) un brouillon de page provenant par exemple d'un CMS. Cependant, vous n'êtes pas limités à certains systèmes CMS. Le mode aperçu s'intègre directement avec getStaticProps et getServerSideProps pour pouvoir être utilisé avec n'importe quel type de solution de récupération de données.

Prise en charge de Sass intégrée

Next.js 9.2 a ajouté la prise en charge de CSS intégré, mais Next.js 9.3 a ajouté la prise en charge de Sass. Les feuilles de style globales et les modules CSS sont pris en charge ainsi que les CSS intégrés. Next.js supporte maintenant les modules CSS avec des fichiers Sass en utilisant la convention de nommage des fichiers [name].module.scss. Contrairement à la prise en charge précédemment disponible dans Next.js 5+ avec next-sass, les modules Sass et CSS globaux peuvent désormais coexister.

Les modules CSS permettent de gérer Sass localement en créant automatiquement des noms de classe uniques. Cela vous permet d'utiliser le même nom de classe Sass dans différents fichiers sans vous soucier des collisions. Ce comportement fait des modules CSS le moyen idéal d'inclure Sass au niveau des composants. Les fichiers des modules CSS peuvent être importés n'importe où dans votre application.

Optimisation statique automatique pour 404

Avec la version 9.0 de Next.js, il y avait une page qui n'était pas automatiquement rendue en HTML statique : la page 404. La principale raison derrière cela est que la page/_error qui alimente le 404 gérait plus que le 404. Par exemple, il gérait aussi les erreurs. Étant donné que les pages 404 sont rendues pour des routes inexistantes, le fait de rendre la page à la demande pourrait entraîner une augmentation des coûts et de la charge du serveur. La version 9.3 du framework améliore les choses et apporte l’optimisation statique automatique pour les pages 404.

Désormais, lorsque votre demande ne comporte pas une page personnalisée /_error.js, le fichier Next.js génère automatiquement la page 404 de manière statique et l'utilise lorsqu'un 404 doit être servi. Cela se produit automatiquement et aucune modification n'est nécessaire. Vous pouvez également personnaliser cette page. Pour remplacer la page 404 par défaut, vous pouvez créer un fichier pages/404.js qui sera toujours automatiquement optimisé statiquement au moment de la construction. Cette page est utilisée à la place de pages/_error.js pour rendre un 404 si votre application en possède un.

Source : Next.js

Et vous ?

:fleche: Utilisez-vous Next.js ? Que pensez-vous des nouveautés de la version 9.3 ?

Voir aussi

:fleche: Next.js 8 est maintenant disponible avec une réduction de l'utilisation de la mémoire au moment de la construction

:fleche: React : WordPress décide d'abandonner la bibliothèque JavaScript de Facebook suite à la polémique autour d'une clause de son octroi de licence

:fleche: État de JavaScript en 2019 : les développeurs aiment un peu plus React, Angular est en déclin, un groupe de développeurs pense que JS est « trop complexe »

:fleche: React : la version 16.8 de la bibliothèque JavaScript est disponible et embarque une version stable des Hooks