Next.js 14.1

Next.js 14.1 apporte des améliorations à l'expérience développeur incluant :

• Améliorations de l'auto-hébergement : Nouvelle documentation et gestionnaire de cache personnalisé
• Améliorations de Turbopack : 5 600 tests passants pour next dev --turbo
• Améliorations DX : Messages d'erreur améliorés, support de pushState et replaceState
• Routes parallèles et interceptées : 20 corrections de bugs basées sur vos retours
• Améliorations de next/image : Support de <picture>, de la direction artistique et du mode sombre

Mettez à jour dès aujourd'hui ou commencez avec :

npx create-next-app@latest

Améliorations de l'auto-hébergement

Nous avons entendu vos retours demandant plus de clarté sur l'auto-hébergement de Next.js avec un serveur Node.js, un conteneur Docker ou une exportation statique. Nous avons refondu notre documentation sur :

• Variables d'environnement d'exécution
• Configuration personnalisée du cache pour l'ISR
• Optimisation d'images personnalisée
• Middleware

Avec Next.js 14.1, nous avons également stabilisé la fourniture de gestionnaires de cache personnalisés pour la Régénération Statique Incrémentale et le Cache de Données plus granulaire pour le routeur App :

module.exports = {
  cacheHandler: require.resolve('./cache-handler.js'),
  cacheMaxMemorySize: 0, // désactive le cache en mémoire par défaut
};

Cette configuration est importante lors de l'auto-hébergement avec des plateformes d'orchestration de conteneurs comme Kubernetes, où chaque pod aura une copie du cache. Un gestionnaire de cache personnalisé permet d'assurer la cohérence entre tous les pods hébergeant votre application Next.js.

Par exemple, vous pouvez sauvegarder les valeurs en cache n'importe où, comme Redis ou Memcached. Nous remercions @neshca pour leur adaptateur de gestionnaire de cache Redis et leur exemple.

Améliorations de Turbopack

Nous continuons à travailler sur la fiabilité et les performances du développement local avec Next.js :

• Fiabilité : Turbopack passe désormais toute la suite de tests de développement de Next.js et est utilisé en production sur les applications de Vercel
• Performances : Amélioration des temps de compilation initiale et des rafraîchissements rapides (Fast Refresh) avec Turbopack
• Utilisation mémoire : Optimisation de l'utilisation mémoire par Turbopack

Nous prévoyons de stabiliser next dev --turbo dans une prochaine version, tout en restant optionnel.

Fiabilité

Next.js avec Turbopack passe désormais 5 600 tests de développement (94 %), soit 600 de plus depuis la dernière mise à jour. Vous pouvez suivre la progression sur areweturboyet.com.

Nous continuons à utiliser next dev --turbo sur toutes les applications Next.js de Vercel, y compris vercel.com et v0.dev. Tous les ingénieurs travaillant sur ces applications utilisent Turbopack quotidiennement.

Nous avons identifié et corrigé plusieurs problèmes pour les très grandes applications Next.js utilisant Turbopack. Pour ces corrections, nous avons ajouté de nouveaux tests à la suite de tests existante de Next.js.

Performances

Pour vercel.com, une grande application Next.js, nous avons observé :

• Jusqu'à 76,7 % plus rapide au démarrage du serveur local
• Jusqu'à 96,3 % plus rapide pour les mises à jour de code avec Fast Refresh
• Jusqu'à 45,8 % plus rapide pour la compilation initiale de route sans cache (Turbopack n'a pas encore de cache disque)

Dans v0.dev, nous avons identifié une opportunité d'optimiser la façon dont les Composants Clients React sont découverts et regroupés dans Turbopack - résultant en un temps de compilation initiale jusqu'à 61,5 % plus rapide. Cette amélioration a également été observée sur vercel.com.

Améliorations futures

Turbopack dispose actuellement d'un cache en mémoire, ce qui améliore les temps de compilation incrémentale pour le Fast Refresh.

Cependant, le cache n'est actuellement pas préservé lors du redémarrage du serveur de développement Next.js. La prochaine étape majeure pour les performances de Turbopack est le cache disque, qui permettra de préserver le cache entre les redémarrages du serveur de développement.

Améliorations de l'expérience développeur

Messages d'erreur et Fast Refresh améliorés

Nous savons à quel point des messages d'erreur clairs sont critiques pour votre expérience de développement local. Nous avons apporté plusieurs corrections pour améliorer la qualité des traces de pile et messages d'erreur affichés lors de l'exécution de next dev.

• Les erreurs qui affichaient auparavant des messages de bundler comme webpack-internal affichent maintenant correctement le code source de l'erreur et le fichier concerné.
• Après avoir vu une erreur dans un composant client et l'avoir corrigée dans l'éditeur, le Fast Refresh ne nettoyait pas toujours l'écran d'erreur. Un rechargement complet était nécessaire. Nous avons corrigé plusieurs de ces cas. Par exemple, en essayant d'exporter metadata depuis un Composant Client.

Par exemple, voici un ancien message d'erreur :

Exemple d'erreur lors d'un appel fetch dans Next.js 14.

Next.js 14.1 améliore cela pour :

Les erreurs lors des appels fetch pendant le rendu affichent maintenant le code source de l'erreur et le fichier concerné.

window.history.pushState et window.history.replaceState

Le routeur App permet maintenant l'utilisation des méthodes natives pushState et replaceState pour mettre à jour l'historique du navigateur sans recharger la page.

Les appels pushState et replaceState s'intègrent au routeur App de Next.js, vous permettant de synchroniser avec usePathname et useSearchParams.

Cela est utile pour mettre à jour immédiatement l'URL lors de la sauvegarde d'état comme des filtres, un ordre de tri ou d'autres informations devant persister entre les rechargements.

'use client';
 
import { useSearchParams } from 'next/navigation';
 
export default function SortProducts() {
  const searchParams = useSearchParams();
 
  function updateSorting(sortOrder: string) {
    const params = new URLSearchParams(searchParams.toString());
    params.set('sort', sortOrder);
    window.history.pushState(null, '', `?${params.toString()}`);
  }
 
  return (
    <>
      <button onClick={() => updateSorting('asc')}>Trier par ordre croissant</button>
      <button onClick={() => updateSorting('desc')}>Trier par ordre décroissant</button>
    </>
  );
}

En savoir plus sur l'utilisation de l'API History native avec Next.js.

Journalisation du cache de données

Pour améliorer l'observabilité de vos données en cache dans votre application Next.js lors de l'exécution de next dev, nous avons apporté plusieurs améliorations à l'option de configuration logging.

Vous pouvez maintenant afficher si le cache a été un HIT ou un SKIP ainsi que l'URL complète demandée :

GET / 200 en 48ms
 ✓ Compilation de /fetch-cache en 117ms
 GET /fetch-cache 200 en 165ms
  │ GET https://api.vercel.app/products/1 200 en 14ms (cache : HIT)
 ✓ Compilation de /fetch-no-store en 150ms
 GET /fetch-no-store 200 en 548ms
  │ GET https://api.vercel.app/products/1 200 en 345ms (cache : SKIP)
  │  │  Raison de l'absence de cache : (cache : no-store)

Ceci peut être activé via next.config.js :

module.exports = {
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
};

Prise en charge de <picture> et de l'Art Direction par next/image

Le composant Image de Next.js prend désormais en charge des cas d'utilisation plus avancés via getImageProps() (stable) qui ne nécessitent pas d'utiliser directement <Image>. Cela inclut :

• 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 pour les modes Clair/Sombre

import { getImageProps } from 'next/image';
 
export default function Page() {
  const common = { alt: 'Héros', width: 800, height: 400 };
  const {
    props: { srcSet: dark },
  } = getImageProps({ ...common, src: '/dark.png' });
  const {
    props: { srcSet: light, ...rest },
  } = getImageProps({ ...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>
  );
}

En savoir plus sur getImageProps().

Routes parallèles et interceptées

Dans Next.js 14.1, nous avons apporté 20 améliorations aux routes parallèles et interceptées.

Au cours des deux dernières versions, nous nous sommes concentrés sur l'amélioration des performances et de la fiabilité de Next.js. Nous avons maintenant pu apporter de nombreuses améliorations aux routes parallèles et interceptées basées sur vos retours. Notamment, nous avons ajouté la prise en charge des routes catch-all et des Server Actions.

• Les routes parallèles vous permettent d'afficher simultanément ou conditionnellement une ou plusieurs pages dans la même mise en page. Pour les sections hautement dynamiques d'une application, comme les tableaux de bord et les flux sur les réseaux sociaux, les routes parallèles peuvent être utilisées pour implémenter des modèles de routage complexes.
• Les routes interceptées vous permettent de charger une route d'une autre partie de votre application dans la mise en page actuelle. Par exemple, en cliquant sur une photo dans un flux, vous pouvez afficher la photo dans une modale, superposée au flux. Dans ce cas, Next.js intercepte la route /photo/123, masque l'URL et la superpose à /feed.

En savoir plus sur les routes parallèles et interceptées ou voir un exemple.

Autres améliorations

Depuis la version 14.0, nous avons corrigé plusieurs bugs très demandés par la communauté.

Nous avons également publié récemment des vidéos expliquant la mise en cache et certaines erreurs courantes avec l'App Router qui pourraient vous être utiles.

• [Docs] Nouvelle documentation sur la redirection
• [Docs] Nouvelle documentation sur les tests
• [Docs] Nouvelle documentation avec une checklist de production
• [Fonctionnalité] Ajout du composant <GoogleAnalytics /> à next/third-parties (Docs)
• [Amélioration] create-next-app est maintenant plus petit et s'installe plus rapidement (PR)
• [Amélioration] Les routes imbriquées générant des erreurs peuvent toujours être capturées par global-error (PR)
• [Amélioration] redirect respecte désormais basePath lorsqu'il est utilisé dans une Server Action (PR)
• [Amélioration] Correction de next/script et de l'utilisation de beforeInteractive avec l'App Router (PR)
• [Amélioration] Transpilation automatique de @aws-sdk et lodash pour un démarrage plus rapide des routes (PR)
• [Amélioration] Correction du flash de contenu non stylisé avec next dev et next/font (PR)
• [Amélioration] Propagation des erreurs notFound au-delà de la limite d'erreur d'un segment (PR)
• [Amélioration] Correction du service des fichiers publics depuis les domaines de locale avec le Pages Router i18n (PR)
• [Amélioration] Erreur si une valeur revalidate invalide est passée (PR)
• [Amélioration] Correction des problèmes de chemin sur les machines Linux lors d'une build créée sur Windows (PR)
• [Amélioration] Correction du Fast Refresh / HMR lors de l'utilisation d'une application multi-zone avec basePath (PR)
• [Amélioration] Amélioration de l'arrêt gracieux lors des signaux de terminaison (PR)
• [Amélioration] Correction des conflits de routes modales lors de l'interception depuis différentes routes (PR)
• [Amélioration] Correction des routes interceptées lors de l'utilisation de la configuration basePath (PR)
• [Amélioration] Affichage d'un avertissement lorsqu'un slot parallèle manquant entraîne un 404 (PR)
• [Amélioration] Amélioration des routes interceptées avec les routes catch-all (PR)
• [Amélioration] Amélioration des routes interceptées avec revalidatePath (PR)
• [Amélioration] Correction de l'utilisation des slots @children avec les routes parallèles (PR)
• [Amélioration] Correction du TypeError lors de l'utilisation de params avec les routes parallèles (PR)
• [Amélioration] Correction de la normalisation des routes catch-all pour les routes parallèles par défaut (PR)
• [Amélioration] Correction de l'affichage des routes parallèles dans le résumé de next build (PR)
• [Amélioration] Correction des paramètres de route lors de l'utilisation de routes interceptées (PR)
• [Amélioration] Amélioration des routes parallèles/interceptées profondément imbriquées (PR)
• [Amélioration] Correction du 404 avec les routes interceptées associées à des groupes de routes (PR)
• [Amélioration] Correction des routes parallèles avec les Server Actions / revalidation du cache du routeur (PR)
• [Amélioration] Correction de l'utilisation de rewrites avec une route interceptée (PR)
• [Amélioration] Les Server Actions fonctionnent désormais depuis des bibliothèques tierces (PR)
• [Amélioration] Next.js peut maintenant être utilisé dans un package ESM (PR)
• [Amélioration] Optimisations des fichiers barrel pour des bibliothèques comme Material UI (PR)
• [Amélioration] Les builds échoueront désormais en cas d'utilisation incorrecte de useSearchParams sans Suspense (PR)

Contributeurs

Next.js est le résultat du travail combiné de plus de 3 000 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, Leah, Maia, OJ, Tobias, et Will.
• Documentation Next.js : Delba, Steph, Michael, et Lee.

Et les contributions de : @OlehDutchenko, @eps1lon, @ebidel, @janicklas-ralph, @JohnPhamous, @chentsulin, @akawalsky, @BlankParticle, @dvoytenko, @smaeda-ks, @kenji-webdev, @rv-david, @icyJoseph, @dijonmusters, @A7med3bdulBaset, @jenewland1999, @mknichel, @kdy1, @housseindjirdeh, @max-programming, @redbmk, @SSakibHossain10, @jamesmillerburgess, @minaelee, @officialrajdeepsingh, @LorisSigrist, @yesl-kim, @StevenKamwaza, @manovotny, @mcexit, @remcohaszing, @ryo-manba, @TranquilMarmot, @vinaykulk621, @haritssr, @divquan, @IgorVaryvoda, @LukeSchlangen, @RiskyMH, @ash2048, @ManuWeb3, @msgadi, @dhayab, @ShahriarKh, @jvandenaardweg, @DestroyerXyz, @SwitchBladeAK, @ianmacartney, @justinh00k, @tiborsaas, @ArianHamdi, @li-jia-nan, @aramikuto, @jquinc30, @samcx, @Haosik, @AkifumiSato, @arnabsen, @nfroidure, @clbn, @siddtheone, @zbauman3, @anthonyshew, @alexfradiani, @CalebBarnes, @adk96r, @pacexy, @hichemfantar, @michaldudak, @redonkulus, @k-taro56, @mhughdo, @tknickman, @shumakmanohar, @vordgi, @hamirmahal, @gaspar09, @JCharante, @sjoerdvanBommel, @mass2527, @N-Ziermann, @tordans, @davidthorand, @rmathew8-gh, @chriskrogh, @shogunsea, @auipga, @SukkaW, @agustints, @OXXD, @clarencepenz, @better-salmon, @808vita, @coltonehrman, @tksst, @hugo-syn, @JakobJingleheimer, @Willem-Jaap, @brandonnorsworthy, @jaehunn, @jridgewell, @gtjamesa, @mugi-uno, @kentobento, @vivianyentran, @empflow, @samennis1, @mkcy3, @suhaotian, @imevanc, @d3lm, @amannn, @hallatore, @Dylan700, @mpsq, @mdio, @christianvuerings, @karlhorky, @simonhaenisch, @olci34, @zce, @LavaToaster, @rishabhpoddar, @jirihofman, @codercor, @devjiwonchoi, @JackieLi565, @thoushif, @pkellner, @jpfifer, @quisido, @tomfa, @raphaelbadia, @j9141997, @hongaar, @MadCcc, @luismulinari, @dumb-programmer, @nonoakij, @franky47, @robbertstevens, @bryndyment, @marcosmartini, @functino, @Anisi, @AdonisAgelis, @seangray-dev, @prkagrawal, @heloineto, @kn327, @ihommani, @MrNiceRicee, @falsepopsky, @thomasballinger, @tmilewski, @Vadman97, @dnhn, @RodrigoTomeES, @sadikkuzu, @gffuma, @Schniz, @joulev, @Athrun-Judah, @rasvanjaya21, @rashidul0405, @nguyenbry, @Mwimwii, @molebox, @mrr11k, @philwolstenholme, @IgorKowalczyk, @Zoe-Bot, @HanCiHu, @JackHowa, @goncy, @hirotomoyamada, @pveyes, @yeskunall, @ChendayUP, @hmaesta, @ajz003, @its-kunal, @joelhooks, @blurrah, @tariknh, @Vinlock, @Nayeem-XTREME, @aziyatali, @aspehler, et @moka-ayumu.