La version 11 de Next.js, la chaîne d'outils qui fournit une structure commune et permet de construire facilement une application frontale React a été publiée le 25 octobre avec de nouvelles fonctionnalités et quelques améliorations. Elle gère de manière transparente le rendu côté serveur pour les utilisateurs. Rappelons que React est une bibliothèque JavaScript développée par Facebook depuis 2013 et traditionnellement utilisée pour créer des applications Web dont le rendu est assuré par JavaScript dans le navigateur du client. Le but principal de cette bibliothèque est de faciliter la création d'application web monopage, via la création de composants dépendant d'un état et générant une page HTML à chaque changement d'état. Next.js est l'un des composants les plus populaires de React.
Voyons ci-dessous quelques nouveautés de cette version.
Répertoire app/
Le répertoire app/ peut coexister avec le répertoire pages existant pour une adoption progressive. Bien que l’utilisateur n’ait pas besoin d'utiliser le répertoire app/ lors de la mise à niveau vers Next.js 13, les bases sont posées pour construire des interfaces complexes tout en envoyant moins de JavaScript.
Mises en page
Le répertoire app/ facilite la mise en page d'interfaces complexes qui maintiennent l'état entre les navigations, évitent les réexpositions fastidieuses et permettent des modèles de routage avancés. En outre, il est possible d'associer du code d'application aux routes, comme des composants, des tests et des styles. La création de routes dans le répertoire app/ nécessite un seul fichier, page.js :
| Code : | Sélectionner tout |
1 2 3 4 5 | // app/page.js
// This file maps to the index route (/)
export default function Page() {
return <h1>Hello, Next.js!</h1>;
} |
Il est désormais possible de définir des mises en page via le système de fichiers. Les mises en page partagent l'interface utilisateur entre plusieurs pages. Lors de la navigation, les mises en page préservent l'état, restent interactives et ne font pas l'objet d'un nouveau rendu.
| Code : | Sélectionner tout |
1 2 3 4 | // app/blog/layout.js
export default function BlogLayout({ children }) {
return <section>{children}</section>;
} |
Composants de serveur
Le répertoire app/ introduit le support de la nouvelle architecture Server Components de React. Les composants de serveur utilisent le serveur et le client pour ce qu'ils font de mieux, ce qui permet de créer des applications rapides et hautement interactives avec un modèle de programmation unique qui offre une excellente expérience aux développeurs.
En utilisant les composants de serveur, il est possible de réduire la quantité de JavaScript envoyée au client, ce qui permet un chargement initial plus rapide des pages. Lorsqu'une route est chargée, le moteur d'exécution Next.js et React, dont la taille est prévisible et peut être mise en cache, est chargé. La taille de ce moteur d'exécution n'augmente pas à mesure que votre application se développe. En outre, le moteur d'exécution est chargé de manière asynchrone, ce qui permet d'améliorer progressivement le HTML du serveur sur le client.
Streaming
Le répertoire app/ introduit la possibilité d'effectuer un rendu progressif et un flux incrémentiel des unités de l'interface utilisateur vers le client. Grâce aux composants de serveur et aux dispositions imbriquées de Next.js, il est possible de rendre instantanément les parties de la page qui ne requièrent pas spécifiquement de données, et d'afficher un état de chargement pour les parties de la page qui récupèrent des données. Avec cette approche, l'utilisateur n'a pas besoin d'attendre le chargement de la page entière avant de pouvoir commencer à interagir avec elle.
Lorsqu'elles sont déployées sur Vercel, les applications Next.js 13 qui utilisent le répertoire app/ diffuseront les réponses par défaut dans les moteurs d'exécution Node.js et Edge pour améliorer les performances.
Récupération de données
Le répertoire app/ introduit une nouvelle façon puissante d'extraire des données, construite au-dessus de React Suspense for Data Fetching. Le nouveau hook d'utilisation remplace les API Next.js précédentes comme getStaticProps et getServerSideProps et s'aligne sur l'avenir de React.
| Code : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | // app/page.js
import { use } from 'react';
async function getData() {
const res = await fetch('...');
const name: string = await res.json();
return name;
}
export default function Page() {
// This value is fully typed
// The return value is *not* serialized
// so you can return Date, Map, Set, etc.
const name = use(getData());
return '...';
} |
Il existe désormais un moyen flexible d'extraire, de mettre en cache et de revalider les données au niveau des composants. Cela signifie que tous les avantages de la génération de sites statiques (SSG), du rendu côté serveur (SSR) et de la régénération statique incrémentielle (ISR) sont désormais disponibles via le hook d'utilisation de React et en étendant l'API de récupération Web :...
La fin de cet article est réservée aux abonnés. Soutenez le Club Developpez.com en prenant un abonnement pour que nous puissions continuer à vous proposer des publications.
