Next.js, le framework de d�veloppement web open-source, d�voile Next.js 14
Next.js, le framework de d�veloppement web open-source, d�voile Next.js 14, la nouvelle version offre un compilateur am�lior� Next.js Turbopack et un aper�u de la fonctionnalit� Pr�-rendu partiel.
Next.js est un framework de d�veloppement web open-source cr�� par la soci�t� priv�e Vercel qui fournit des applications web bas�es sur React avec un rendu c�t� serveur et une g�n�ration de site web statique. La documentation de React mentionne Next.js parmi les "cha�nes d'outils recommand�es" et le conseille aux d�veloppeurs lors de la "construction d'un site web rendu c�t� serveur avec Node.js" Alors que les applications React traditionnelles ne peuvent rendre leur contenu que dans le navigateur c�t� client, Next.js �tend cette fonctionnalit� pour inclure des applications rendues c�t� serveur.
Comme annonc� � la Next.js Conf, Next.js 14 est la version la plus cibl�e avec :
- Turbopack : 5 000 tests r�ussis pour App & Pages Router
- D�marrage du serveur local 53% plus rapide
- 94% de mises � jour de code plus rapides avec Fast Refresh
- Actions serveur (Stable) : Mutations progressivement am�lior�es
- Int�gration de la mise en cache et de la revalidation
- Appels de fonctions simples, ou fonctionnement natif avec les formulaires
- Pr�-rendus partiels (aper�u) : R�ponse statique initiale rapide + contenu dynamique en continu
- Next.js Learn (Nouveau) : Cours gratuit sur l'App Router, l'authentification, les bases de donn�es, et plus encore.
Mettez � niveau d�s aujourd'hui ou d�marrez avec :
Terminal
Code:
npx create-next-app@latest
Compilateur Next.js : Turbopack
Depuis Next.js 13, l'�quipe de Next.js a travaill� pour am�liorer la performance du d�veloppement local dans Next.js, � la fois dans les Pages et dans l'App Router.
Auparavant, ils avaient r��crient next dev et d'autres parties de Next.js pour soutenir cet effort. Ils ont depuis chang� leur approche pour �tre plus incr�mental. Cela signifie que le compilateur bas� sur Rust atteindra bient�t la stabilit�, car ils se sont recentr�s sur le support de toutes les fonctionnalit�s de Next.js en premier.
5 000 tests d'int�gration pour next dev passent maintenant avec Turbopack, le moteur Rust sous-jacent. Ces tests incluent 7 ans de corrections de bugs et de reproductions.
En testant vercel.com, une grande application Next.js, ils ont vu :
- Un d�marrage du serveur local jusqu'� 53,3 % plus rapide
- Jusqu'� 94,7 % de mises � jour de code plus rapides avec Fast Refresh
Ce benchmark est un r�sultat pratique des am�liorations de performance auxquelles vous pouvez vous attendre avec une grande application (et un grand graphique de modules). Avec 90% de tests r�ussis pour next dev, vous devriez voir des performances plus rapides et plus fiables lorsque vous utilisez next dev --turbo.
Une fois qu'ils auront atteint 100% des tests r�ussis, ils passeront Turbopack � la version stable dans une prochaine version mineure. Ils continueront �galement � supporter l'utilisation de webpack pour les configurations personnalis�es et les plugins de l'�cosyst�me.
Formes et mutations
Next.js 9 a introduit les API Routes, un moyen de construire rapidement des points d'acc�s au backend en m�me temps que le code du frontend.
Par exemple, vous pouvez cr�er un nouveau fichier dans le r�pertoire api/ :
pages/api/submit.ts
Code:
1
2
3
4
5
6
7
8
9
10
| import type { NextApiRequest, NextApiResponse } from 'next';
export default async function handler(
req: NextApiRequest,
res: NextApiResponse,
) {
const data = req.body;
const id = await createItem(data);
res.status(200).json({ id });
} |
Ensuite, c�t� client, vous pouvez utiliser React et un gestionnaire d'�v�nement comme onSubmit pour effectuer fetch dans votre route API.
pages/index.tsx
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| import { FormEvent } from 'react';
export default function Page() {
async function onSubmit(event: FormEvent<HTMLFormElement>) {
event.preventDefault();
const formData = new FormData(event.currentTarget);
const response = await fetch('/api/submit', {
method: 'POST',
body: formData,
});
// Handle response if necessary
const data = await response.json();
// ...
}
return (
<form onSubmit={onSubmit}>
<input type="text" name="name" />
<button type="submit">Submit</button>
</form>
);
} |
Avec Next.js 14, l'�quipe de Next.js veut simplifier l'exp�rience des d�veloppeurs dans la cr�ation de mutations de donn�es. De plus, ils voulent am�liorer l'exp�rience de l'utilisateur lorsqu'il dispose d'une connexion r�seau lente, ou lorsqu'il soumet un formulaire � partir d'un appareil moins puissant.
Actions serveur (stable)
Et si vous n'aviez pas besoin de cr�er manuellement une route API ? Au lieu de cela, vous pourriez d�finir une fonction qui s'ex�cute en toute s�curit� sur le serveur, appel�e directement � partir de vos composants React.
L'App Router est construit sur le canal React canary, qui est stable pour les frameworks afin d'adopter de nouvelles fonctionnalit�s. Depuis la v14, Next.js est pass� � la derni�re version de React canary, qui inclut des actions serveurs stables.
L'exemple pr�c�dent du Pages Router peut �tre simplifi� en un seul fichier :
app/page.tsx
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
| export default function Page() {
async function create(formData: FormData) {
'use server';
const id = await createItem(formData);
}
return (
<form action={create}>
<input type="text" name="name" />
<button type="submit">Submit</button>
</form>
);
} |
Actions serveur devrait sembler familier aux d�veloppeurs qui ont d�j� utilis� des frameworks centr�s sur le serveur dans le pass�. Il s'appuie sur les principes fondamentaux du web tels que les formulaires et l'API web FormData.
Bien que l'utilisation des actions serveur par le biais d'un formulaire soit utile pour l'am�lioration progressive, ce n'est pas une obligation. Vous pouvez �galement les appeler directement en tant que fonction, sans formulaire. Lorsque vous utilisez TypeScript, vous b�n�ficiez d'une s�curit� de type de bout en bout entre le client et le serveur.
La modification des donn�es, le re-rendu de la page ou la redirection peuvent se faire en un seul aller-retour sur le r�seau, ce qui garantit que les donn�es correctes sont affich�es sur le client, m�me si le fournisseur en amont est lent. En outre, vous pouvez composer et r�utiliser diff�rentes actions, y compris plusieurs actions diff�rentes dans la m�me route.
Mise en cache, revalidation, redirection, etc.
Les actions serveur sont profond�ment int�gr�es dans l'ensemble du mod�le App Router. Vous pouvez :
- Revalider les donn�es mises en cache avec revalidatePath() ou revalidateTag()
- Rediriger vers diff�rentes routes avec redirect()
- D�finir et lire les cookies avec cookies()
- G�rer les mises � jour optimistes de l'interface utilisateur avec useOptimistic()
- Attraper et afficher les erreurs du serveur avec useFormState()
- Afficher les �tats de chargement sur le client avec useFormStatus()
Pr�-rendus partiels (aper�u)
L�quipe de Next.js a partag� un aper�u de Pr�-rendu partiel - une optimisation du compilateur pour le contenu dynamique avec une r�ponse statique initiale rapide - sur laquelle ils travaillent pour Next.js.
Les Pr�-rendus partiels s'appuient sur une d�cennie de recherche et de d�veloppement sur le rendu c�t� serveur (SSR), la g�n�ration de sites statiques (SSG) et la revalidation statique incr�mentale (ISR).
Motivation
Il y a actuellement trop de temps d'ex�cution, d'options de configuration et de m�thodes de rendu � prendre en compte. Vous voulez la vitesse et la fiabilit� de la statique, tout en prenant en charge des r�ponses personnalis�es et enti�rement dynamiques.
Les performances globales et la personnalisation ne doivent pas se faire au d�triment de la complexit�.
Le d�fi �tait de cr�er une meilleure exp�rience pour les d�veloppeurs, en simplifiant le mod�le existant sans introduire de nouvelles API pour les d�veloppeurs. Bien que la mise en cache partielle du contenu c�t� serveur ait d�j� exist�, ces approches doivent encore r�pondre aux objectifs de composabilit� et d'exp�rience du d�veloppeur que nous visons.
Le Pr�-rendu partiel l ne n�cessite aucune nouvelle API � apprendre.
Construit sur React Suspense
Le Pr�-rendu partiel est d�fini par vos limites Suspense. Voici comment cela fonctionne. Consid�rons la page de commerce �lectronique suivante :
app/page.tsx
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| export default function Page() {
return (
<main>
<header>
<h1>My Store</h1>
<Suspense fallback={<CartSkeleton />}>
<ShoppingCart />
</Suspense>
</header>
<Banner />
<Suspense fallback={<ProductListSkeleton />}>
<Recommendations />
</Suspense>
<NewProducts />
</main>
);
} |
Si l'option Pr�-rendu partiel est activ�e, cette page g�n�re un shell statique bas� sur les limites de votre <Suspense />. Le fallback de React Suspense est pr�-rendu.
Les fallbacks de Suspense dans le shell sont ensuite remplac�s par des composants dynamiques, comme la lecture des cookies pour d�terminer le panier, ou l'affichage d'une banni�re en fonction de l'utilisateur.
Lorsqu'une requ�te est faite, le shell HTML statique est imm�diatement servi :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
| <main>
<header>
<h1>My Store</h1>
<div class="cart-skeleton">
<!-- Hole -->
</div>
</header>
<div class="banner" />
<div class="product-list-skeleton">
<!-- Hole -->
</div>
<section class="new-products" />
</main> |
�tant donn� que <ShoppingCart /> lit les cookies pour conna�tre la session de l'utilisateur, ce composant est ensuite diffus� dans le cadre de la m�me requ�te HTTP que le shell statique. Il n'y a pas d'allers-retours suppl�mentaires sur le r�seau.
app/cart.tsx
Code:
1
2
3
4
5
6
7
| import { cookies } from 'next/headers'
export default function ShoppingCart() {
const cookieStore = cookies()
const session = cookieStore.get('session')
return ...
} |
Pour obtenir l'enveloppe statique la plus granulaire possible, il peut �tre n�cessaire d'ajouter des limites de suspension suppl�mentaires. Cependant, si vous utilisez d�j� loading.js aujourd'hui, il s'agit d'une limite Suspense implicite, donc aucun changement ne sera n�cessaire pour g�n�rer le shell statique.
� venir
Le pr�-rendement partiel est en cours de d�veloppement. Plus de mises � jour seront partag�es dans une prochaine version mineure.
Am�lioration des m�tadonn�es
Avant que le contenu de votre page puisse �tre diffus� � partir du serveur, d'importantes m�tadonn�es concernant la fen�tre de visualisation, la palette de couleurs et le th�me doivent d'abord �tre envoy�es au navigateur.
S'assurer que ces méta tags sont envoy�s avec le contenu initial de la page contribue � une exp�rience utilisateur fluide, en emp�chant la page de vaciller en changeant la couleur du th�me, ou en modifiant la mise en page en raison des changements de viewport.
Dans Next.js 14, nous avons d�coupl� les m�tadonn�es bloquantes et non bloquantes. Seul un petit sous-ensemble d'options de m�tadonn�es est bloquant, et nous voulons nous assurer que les m�tadonn�es non bloquantes n'emp�cheront pas une page partiellement pr�-rendue de servir le shell statique.
Les options de m�tadonn�es suivantes sont d�sormais obsol�tes et seront supprim�es demetadata dans une prochaine version majeure :
- viewport : D�finit le zoom initial et d'autres propri�t�s de la fen�tre de visualisation
- colorScheme : D�finit les modes de support (clair/fonc�) pour la fen�tre de visualisation.
- themeColor : D�finit la couleur avec laquelle le chrome autour de la fen�tre de visualisation doit �tre rendu.
� partir de Next.js 14, de nouvelles options viewport et generateViewport remplacent ces options. Toutes les autres options de metadata restent inchang�es.
Vous pouvez commencer � adopter ces nouvelles API d�s aujourd'hui. Les options de metadata existantes continueront � fonctionner.
Source : Next.js
Et vous ?
:fleche: Que pensez-vous de cette nouvelle version de Next.js ?
Voir aussi :
:fleche: Next.js 13 est disponible, elle apporte Turbopack, le nouveau successeur de Webpack bas� sur Rust, sur une application comportant 3 000 modules, le d�marrage de Turbopack prend 1,8 seconde
:fleche: Fresh, un framework web de nouvelle g�n�ration, con�u pour la vitesse, la fiabilit� et la simplicit�, il apporte un peu de concurrence pour Next.js
:fleche: �tat de JavaScript 2022 : React reste le framework front-end dominant mais est en perte de vitesse c�t� satisfaction, JQuery est la troisi�me biblioth�que la plus utilis�e
