Nous sommes ravis de vous présenter Next.js 10.2, qui inclut :
- Compilations plus rapides : Jusqu'à ~60 % de compilation accélérée avec la mise en cache.
- Rafraîchissements plus rapides : 100 ms à 200 ms de rafraîchissement accéléré.
- Démarrage plus rapide : Jusqu'à ~24 % d'accélération pour
next dev. - Amélioration de l'accessibilité : Les changements de route sont maintenant annoncés par les lecteurs d'écran.
- Redirections et réécritures plus flexibles : Correspondance avec n'importe quel en-tête, cookie ou paramètre de requête.
- Optimisation automatique des polices web : Amélioration des performances grâce à l'inclusion du CSS des polices.
Mettez à jour dès aujourd'hui en exécutant npm i next@latest.
Webpack 5
Avec Next.js 10.1, nous avons amélioré Fast Refresh et réduit les temps d'installation. Nous sommes heureux de partager d'autres améliorations de performances rendues possibles grâce à webpack 5.
Aujourd'hui, nous étendons le déploiement de webpack 5 aux applications Next.js. À partir de Next.js 10.2, toutes les applications qui n'utilisent pas de configuration webpack personnalisée dans leur next.config.js utiliseront automatiquement webpack 5.
Lorsque webpack 5 est activé, vous bénéficierez automatiquement de nouvelles fonctionnalités et améliorations comme :
- Mise en cache sur disque améliorée : La mise en cache sur disque permet au compilateur de conserver le travail entre les exécutions de
next build. Seuls les fichiers modifiés seront recompilés, ce qui améliore les performances. Le client Vercel Scale a observé une accélération de 63 % sur les compilations ultérieures. - Fast Refresh amélioré : Next.js priorise maintenant la compilation liée à Fast Refresh, ce qui permet un rafraîchissement 100 ms à 200 ms plus rapide à chaque fois.
- Mise en cache à long terme améliorée des ressources : Le résultat entre plusieurs exécutions de
next buildest maintenant déterministe, améliorant la mise en cache des ressources JavaScript en production. Les hachages restent identiques lorsque le contenu d'une page ne change pas. - Tree Shaking amélioré : Les modules CommonJS peuvent maintenant être tree shakés pour supprimer automatiquement le code inutilisé. Une analyse statique est utilisée pour déterminer les modules sans effets secondaires.
export *suit plus d'informations et ne marque plus l'export par défaut comme utilisé. Le tree-shaking intra-module est également activé, permettant aux imports utilisés uniquement dans une exportation inutilisée d'être tree shakés.
Nous avons travaillé dur pour assurer une transition fluide de webpack 4 à 5. La suite de tests principale de Next.js, avec plus de 3 400 tests d'intégration, s'exécute sur chaque pull request avec le support de webpack 5 activé.
Si votre application possède une configuration webpack personnalisée, nous vous recommandons de suivre la documentation pour activer webpack 5. Après la mise à niveau vers webpack 5 dans Next.js, veuillez partager vos retours avec nous.
Amélioration des performances de démarrage
Nous avons amélioré l'initialisation du CLI Next.js, réduisant le temps de démarrage pour next dev jusqu'à 24 % plus rapide après la première exécution. Par exemple, next dev pour vercel.com est passé de 3,3 s à 2,5 s.
Nous avons pour mission de rendre votre expérience de développement locale en temps réel (20x plus rapide). Restez à l'écoute pour d'autres améliorations de performances de démarrage dans les prochaines versions.
Améliorations de l'accessibilité
Les changements de route sont maintenant annoncés aux lecteurs d'écran et autres technologies d'assistance par défaut.
L'exemple ci-dessous montre le titre "Real Data. Real Performance" annoncé par macOS VoiceOver lors d'une navigation côté client. Le nom de la page est trouvé en cherchant d'abord un élément <h1>, puis en revenant à document.title, et enfin au chemin.
Les changements de route sont maintenant annoncés automatiquement.
Merci à Kyle Boss et Kitty Giraudel pour leur aide dans la réalisation de cette fonctionnalité.
Routage basé sur les en-têtes et paramètres de requête
Les réécritures, redirections et en-têtes de Next.js prennent maintenant en charge une nouvelle propriété has permettant de faire correspondre les en-têtes entrants, les cookies et les chaînes de requête.
Le client Vercel Joyn utilise has pour optimiser le contenu à la fois pour la découvrabilité et les performances. Par exemple, vous pourriez rediriger les anciens navigateurs en fonction de l'User-Agent :
module.exports = {
async redirects() {
return [
{
source: '/:path((?!old-browser$).*)',
has: [
{
type: 'header',
key: 'User-Agent',
value:
'Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; Microsoft; Lumia 950)',
},
],
destination: '/old-browser',
permanent: false,
},
];
},
};Un autre exemple pourrait être la redirection des utilisateurs en fonction de leur localisation :
module.exports = {
async redirects() {
return [
{
source: '/:path((?!uk/).*)',
has: [
{
type: 'header',
key: 'x-vercel-ip-country',
value: 'GB',
},
],
destination: '/uk/:path*',
permanent: true,
},
];
},
};Enfin, vous pourriez rediriger si un utilisateur est déjà connecté :
module.exports = {
async redirects() {
return [
{
source: '/',
has: [
{
type: 'header',
key: 'x-authorized',
value: '(?<authorized>yes|true)',
},
],
destination: '/dashboard?authorized=:authorized',
permanent: false,
},
];
},
};Pour en savoir plus et explorer d'autres exemples, consultez la documentation sur les redirections.
Optimisation automatique des polices web
82 % des pages web pour ordinateur utilisent des polices web. Les polices personnalisées sont importantes pour l'identité de marque, le design et la cohérence entre navigateurs et appareils. Cependant, l'utilisation d'une police web ne devrait pas se faire au détriment des performances.
Next.js prend maintenant en charge l'optimisation automatique des polices web lors de l'utilisation de polices web. Par défaut, Next.js inclura automatiquement le CSS des polices au moment de la compilation, éliminant un aller-retour supplémentaire pour récupérer les déclarations de police. Cela se traduit par des améliorations du First Contentful Paint (FCP) et du Largest Contentful Paint (LCP). Par exemple :
// Avant
<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet" />
// Après
<style data-href="https://fonts.googleapis.com/css2?family=Inter">
@font-face {
font-family: 'Inter';
font-style: normal;
<!-- ... -->
}
</style>L'optimisation automatique des polices web prend actuellement en charge Google Fonts et nous travaillons à étendre ce support à d'autres fournisseurs de polices. Nous prévoyons également d'ajouter le contrôle des stratégies de chargement et des valeurs font-display. En optimisant les polices par défaut, nous aidons les développeurs à livrer des sites plus rapides et à améliorer leurs Core Web Vitals sans effort supplémentaire.
Merci à nos partenaires chez Google et à Janicklas Ralph pour leur aide dans la réalisation de cette fonctionnalité.
Équipe en croissance
Nous sommes heureux d'annoncer que Tobias Koppers, l'auteur de webpack, a rejoint l'équipe Next.js chez Vercel.
Communauté
Nous remercions notre communauté, y compris tous les retours et contributions externes qui ont contribué à façonner cette version.
Cette version a été rendue possible grâce aux contributions de : @rpxs, @lemarier, @RayhanADev, @janicklas-ralph, @devknoll, @felipeptcho, @rishabhpoddar, @sokra, @m-leon, @turadg, @PierreBerger, @divmain, @dominikwilkowski, @pranavp10, @ijjk, @santidalmasso, @HaNdTriX, @jamesgeorge007, @garmeeh, @leerob, @shuding, @feute, @timneutkens, @alexvilchis, @Timer, @malixsys, @sahilrajput03, @marcvangend, @steven-tey, @julienben, @umarsenpai, @Mzaien, @merceyz, @AntelaBrais, @SystemDisc, @M1ck0, @jbmoelker, @jaisharx, @amannn, @vkarpov15, @gaelhameon, @4ortytwo, @Simply007, @styxlab, @xCloudzx, @wodCZ, @emmanuelgautier, @leosuncin, @ludder, @geritol, @vassbence, @vvo, @portenez, @arshad, @tarunama, @flybayer, @Hanaffi, @SokratisVidros, @chibicode, @kylemarshall18, et @jarrodwatts.