Next.js 13.5

Next.js 13.5 améliore les performances et la fiabilité du développement local avec :

• 22% de démarrage plus rapide du serveur local : Itérez plus vite avec le routeur App & Pages
• 29% de HMR (Fast Refresh) plus rapide : Pour des itérations plus rapides lors de la sauvegarde des modifications
• 40% d'utilisation mémoire en moins : Mesuré lors de l'exécution de next start
• Importations de packages optimisées : Mises à jour plus rapides avec les bibliothèques d'icônes et de composants populaires
• Améliorations de next/image : Prise en charge de <picture>, de l'art direction et du mode sombre
• Et plus de 438 bugs corrigés !

Mettez à jour dès aujourd'hui et inscrivez-vous à la Next.js Conf le 26 octobre :

npm i next@latest react@latest react-dom@latest eslint-config-next@latest

Amélioration du temps de démarrage et de Fast Refresh

Nous sommes ravis de voir l'adoption continue du routeur App, qui connaît désormais une croissance de 80% mois sur mois selon les données des 10 millions de sites les plus visités analysés par HTTP Archive.

Depuis Next.js 13.4, notre priorité a été d'améliorer les performances et la fiabilité des applications utilisant le routeur App. Entre les versions 13.4 et 13.5, nous avons constaté les améliorations suivantes sur une nouvelle application :

• 22% plus rapide au démarrage du serveur local
• 29% plus rapide pour le HMR (Fast Refresh)
• 40% de mémoire en moins utilisée

Nous avons atteint ces gains de performance grâce à des optimisations comme :

• Réduction du travail via la mise en cache ou la minimisation des opérations lentes
• Optimisation des opérations coûteuses sur le système de fichiers
• Meilleure traversée incrémentale de l'arbre pendant la compilation
• Déplacement des appels synchrones bloquants inutiles vers des chargements paresseux
• Configuration automatique des grandes bibliothèques d'icônes

L'utilisateur Next.js Lattice a rapporté des compilations 87-92% plus rapides dans ses tests.

Alors que nous continuons d'itérer et d'améliorer les performances de notre système de bundling actuel, nous travaillons également en parallèle sur Turbopack (Bêta) pour augmenter encore les performances. Avec la version 13.5, next dev --turbo prend désormais en charge plus de fonctionnalités.

Importations de packages optimisées

Nous avons réalisé une avancée majeure pour optimiser les importations de packages, améliorant à la fois les performances en développement local et les démarrages à froid en production, lors de l'utilisation de grandes bibliothèques d'icônes ou de composants, ou d'autres dépendances qui réexportent des centaines ou des milliers de modules.

Précédemment, nous avions ajouté la prise en charge de modularizeImports, vous permettant de configurer la résolution des imports avec ces bibliothèques. Dans la version 13.5, nous avons remplacé cette option par optimizePackageImports, qui ne nécessite plus de spécifier le mapping des imports, mais optimise automatiquement les imports pour vous.

Les bibliothèques comme @mui/icons-material, @mui/material, date-fns, lodash, lodash-es, ramda, react-bootstrap, @headlessui/react, @heroicons/react et lucide-react sont désormais automatiquement optimisées, ne chargeant que les modules réellement utilisés, tout en conservant la commodité des instructions import avec de nombreuses exportations nommées.

Voir la PR ou en savoir plus sur optimizePackageImports dans notre documentation.

Améliorations de next/image

Suite aux retours de la communauté, nous avons ajouté une nouvelle fonction expérimentale unstable_getImgProps() pour supporter des cas d'utilisation avancés sans utiliser directement le composant <Image>, notamment :

• Travailler avec background-image ou image-set
• Travailler avec context.drawImage() de canvas ou new Image()
• Travailler avec les requêtes média de <picture> pour implémenter l'Art Direction ou des images Mode Clair/Sombre

import { unstable_getImgProps as getImgProps } from 'next/image';
 
export default function Page() {
  const common = { alt: 'Hero', width: 800, height: 400 };
  const {
    props: { srcSet: dark },
  } = getImgProps({ ...common, src: '/dark.png' });
  const {
    props: { srcSet: light, ...rest },
  } = getImgProps({ ...common, src: '/light.png' });
 
  return (
    <picture>
      <source media="(prefers-color-scheme: dark)" srcSet={dark} />
      <source media="(prefers-color-scheme: light)" srcSet={light} />
      <img {...rest} />
    </picture>
  );
}

De plus, la prop placeholder prend désormais en charge la fourniture de data:image/ arbitraires pour les images de placeholder qui ne doivent pas être floutées (démo).

En savoir plus sur next/image dans notre documentation.

Autres améliorations

Depuis la version 13.4.0, nous avons corrigé plus de 438 bugs et apporté diverses améliorations, notamment :

• [Docs] Nouvelle documentation sur les Formulaires et Mutations
• [Docs] Nouvelle documentation sur les Composants Serveur et Composants Client
• [Docs] Nouvelle documentation sur la Politique de Sécurité du Contenu et les Nonces
• [Docs] Nouvelle documentation sur le Cache et la Revalidation
• [Fonctionnalité] useParams et useSearchParams de next/navigation fonctionnent désormais avec le routeur Pages pour une adoption progressive
• [Fonctionnalité] Prise en charge de scroll: false sur router.push / router.replace
• [Fonctionnalité] Prise en charge de scroll={false} sur next/link
• [Fonctionnalité] Support HTTPS pour le développement : next dev --experimental-https
• [Fonctionnalité] Ajout du support pour cookies().has() (Docs)
• [Fonctionnalité] Ajout du support pour les noms d'hôte IPv6
• [Fonctionnalité] Ajout du support pour Yarn PnP avec le routeur App
• [Fonctionnalité] Ajout du support pour redirect() dans les Server Actions
• [Fonctionnalité] Ajout du support pour Bun lors de la création de projets : bunx create-next-app (Docs)
• [Fonctionnalité] Support du Draft Mode dans le Middleware et l'Edge Runtime
• [Fonctionnalité] cookies() et headers() sont désormais supportés dans le Middleware
• [Fonctionnalité] L'API Metadata supporte désormais summary_large_image pour les cartes Twitter
• [Fonctionnalité] RedirectType est désormais exporté depuis next/navigation
• [Fonctionnalité] Ajout d'un mode test expérimental pour Playwright (Docs)
• [Amélioration] Refonte de next start pour gérer 1062% plus de requêtes par seconde
• [Amélioration] Optimisation des internes de Next.js pour améliorer les démarrages à froid (jusqu'à 40% plus rapides, testé sur Vercel)
• [Amélioration] Meilleur support de Jest pour le routeur App (PR)
• [Amélioration] Redesign de la sortie de next dev (PR)
• [Amélioration] Les Server Actions fonctionnent désormais avec les routes entièrement statiques (y compris la revalidation des données avec ISR)
• [Amélioration] Les Server Actions ne bloquent plus la navigation entre les routes
• [Amélioration] Les Server Actions ne peuvent plus déclencher plusieurs actions concurrentes
• [Amélioration] Les Server Actions appelant redirect() poussent désormais dans la pile d'historique au lieu de remplacer l'entrée courante pour garantir le bon fonctionnement du bouton retour
• [Amélioration] Les Server Actions ajoutent un en-tête cache-control no-cache, no-store pour empêcher la mise en cache par le navigateur
• [Amélioration] Correction d'un bug où les Server Actions pouvaient être appelées deux fois après une navigation
• [Amélioration] Amélioration du support d'Emotion CSS avec les Server Components
• [Amélioration] Support de scroll-behavior: smooth pour les changements d'URL avec hash
• [Amélioration] Ajout d'un polyfill pour Array.prototype.at dans tous les navigateurs
• [Amélioration] Correction d'une condition de race dans le cache de next dev lors du traitement de requêtes parallèles multiples
• [Amélioration] La sortie fetch dans la console montre désormais les requêtes qui ont ignoré le cache avec cache: SKIP
• [Amélioration] usePathname supprime désormais correctement basePath
• [Amélioration] next/image précharge désormais correctement les images dans le routeur App
• [Amélioration] not-found ne rend plus deux fois le layout racine
• [Amélioration] NextRequest peut désormais être clonée (ex: new NextRequest(request))
• [Amélioration] app/children/page.tsx fonctionne désormais correctement pour les routes littérales /children
• [Amélioration] La Politique de Sécurité du Contenu supporte désormais nonce pour les scripts préinitialisés
• [Amélioration] L'utilisation de redirect depuis next/navigation supporte désormais basePath
• [Amélioration] Correction de process.env non disponible pendant le rendu en mode output: 'standalone'
• [Amélioration] Message d'erreur amélioré lors de l'utilisation d'une Exportation Statique avec des fonctionnalités non supportées
• [Amélioration] Implémentation améliorée de readdir récursif (~3x plus rapide)
• [Amélioration] Correction de fallback: false avec des segments de route dynamiques qui causaient auparavant des requêtes bloquées
• [Amélioration] Correction d'une erreur où signal était passé aux requêtes de revalidation, les faisant échouer lorsque la requête était déjà abandonnée
• [Amélioration] Suppression du polling fetch sur la page 404 au profit d'événements websocket, évitant des rechargements inutiles lors de l'exécution de next dev
• [Amélioration] performance.measure ne peut plus causer de mismatch d'hydratation
• [Amélioration] Correction des cas où un rechargement complet inattendu pouvait se produire lors de l'édition de pages/_app
• [Amélioration] ImageResponse étend désormais Response pour une meilleure vérification de type (PR)
• [Amélioration] pages n'est plus affiché lorsqu'il n'y a pas de sortie pages dans next build
• [Amélioration] Correction de skipTrailingSlashRedirect ignoré dans <Link>
• [Amélioration] Correction des routes de métadonnées dynamiques dupliquées en mode dev

Contributeurs

Next.js est le fruit du travail combiné de plus de 2 800 développeurs individuels, de partenaires industriels comme Google et Meta, et de notre équipe principale chez Vercel. Rejoignez la communauté sur GitHub Discussions, Reddit et Discord.

Cette version a été rendue possible par :

• L'équipe Next.js : Andrew, Balazs, Jiachi, Jimmy, JJ, Josh, Sebastian, Shu, Steven, Tim, Wyatt et Zack.
• L'équipe Turbopack : Donny, Justin, Leah, Maia, OJ, Tobias et Will.

Et les contributions de : @opnay, @vinaykulk621, @goguda, @coreyleelarson, @bencmbrook, @cramforce, @williamli, @stefanprobst, @feugy, @Kikobeats, @dvoytenko, @MaxLeiter, @devjiwonchoi, @lacymorrow, @kylemcd, @tibi1220, @iamarpitpatidar, @pythagoras-yamamoto, @alexkirsz, @jsteele-stripe, @tknickman, @gaojude, @janicklas-ralph, @ericfennis, @JohnAdib, @MiLk, @delbaoliveira, @leerob, @LuudJanssen, @lucasconstantino, @davecarlson, @colinhacks, @jantimon, @Banbarashik, @ForsakenHarmony, @arturbien, @gnoff, @hsrvms, @DuCanhGH, @tim-hanssen, @Aryan9592, @rishabhpoddar, @Lantianyou, @joulev, @AkifumiSato, @trigaten, @HurSungYun, @DevLab2425, @SukkaW, @daniel-web-developer, @ky1ejs, @wyattjoh, @ShaunFerris, @syedtaqi95, @Heidar-An, @Jeffrey-Zutt, @Ryan-Dia, @steppefox, @hiro0218, @rjsdnql123, @fgiuliani, @steven-tey, @AntoineBourin, @adamrhunter, @darshanjain-entrepreneur, @s0h311, @djreillo, @dijonmusters, @cassidoo, @anonrig, @gfgabrielfranca, @Bitbbot, @BrennanColberg, @Nick-Mazuk, @thomasballinger, @lucgagan, @nroland013, @SonMooSans, @jenewland1999, @thorwebdev, @jyunhanlin, @Gnadhi, @yagogmaisp, @carlos-menezes, @ryo-manba, @vamcs, @matepapp, @SleeplessOne1917, @ecklf, @karlhorky, @starunaway, @FernandVEYRIER, @Terro216, @anthonyshew, @suhaotian, @simonswiss, @feikerwu, @lubakravche, @masnormen, @bottxiang, @mhmdrioaf, @tyler-lutz, @vincenthongzy, @yigithanyucedag, @doinki, @danger-ahead, @bre30kra69cs, @Yash-Singh1, @krmeda, @bigyanse, @2-NOW, @Mingyu-Song, @morganfeeney, @aralroca, @nickmccurdy, @adamjmcgrath, @angel1254mc, @cxa, @ibash, @mohanraj-r, @kevinmitch14, @iaurg, @steebchen, @Cow258, @charlesbdudley, @tyhopp, @Drblessing, @milovangudelj, @jacobsfletch, @JoshuaKGoldberg, @zignis, @ChristianIvicevic, @mrxbox98, @oliviertassinari, @fsansalvadore, @tvthatsme, @dvakatsiienko, @brunoeduardodev, @sonam-serchan, @vicsantizo, @leodr, @wiscaksono, @hustLer2k, @joshuabaker, @shozibabbas, @omarhoumz, @jamespearson, @tristndev, @AldeonMoriak, @manovotny, @mirismaili, @SuttonJack, @jeremydouglas, @JanCizmar, @mltsy, @WilderDev, @Guilleo03, @Willem-Jaap, @escwxyz, @wiredacorn, @Ethan-Arrowood, @BaffinLee, @greatSumini, @ciruz, @kijikunnn, @DustinsCode, @riqwan, @joostdecock, @nikolovlazar, @Bowens20832, @JohnAlbin, @gidgudgod, @maxproske, @dunklesToast, @yyuemii, @mPaella, @mknichel, @niko20, @mkcy3, @valentinpolitov, @smaeda-ks, @keyz, @Schniz, @koba04, @jiwooIncludeJeong, @ethanmick, @didemkkaslan, @itsmingjie, @v1k1, @thepatrick00, @taylorbryant, @kvnang, @alainkaiser, @simPod, @svarunid, @pauek, @lycuid, @MarkAtOmniux, @darshkpatel, @johnta0, @devagrawal09, @ibrahemid, @JesseKoldewijn, @javivelasco, @05lazy, @alexanderbluhm, @Fonger, @souporserious, @DevEsteves, @sanjaiyan-dev, @g12i, @cesarkohl, @josh, @li-jia-nan, @gabschne, @akd-io, @runjuu, @jocarrd, @nnnnoel, @ferdingler et @ikryvorotenko