Quoi de neuf dans Next.js 13 ? — Magazine de rupture

Octubre llegó y se fue, y con él, Next.js lanzó una nueva versión principal repleta (juego de palabras) con toneladas de nuevas características, algunas de las cuales se pueden adoptar sin problemas desde su aplicación Next.js 12, mientras que otras pas autant. .

Si vous ne faites que sauter dans le train en marche, il peut être déroutant de distinguer le battage médiatique, la désinformation et ce qui est stable pour vos applications de production, mais n’ayez crainte ! Je suis ici pour vous donner un bon aperçu et vous mettre au courant.

Quelle désinformation ?

Comme pour toutes les versions de Next.js, certaines API ont été déplacées vers le noyau stable et pour une utilisation recommandée, et d’autres sont toujours dans le canal expérimental. Les API « expérimentales » font toujours débat. La fonctionnalité de base est là, mais la question de comment ces API se comportent et comment elles peuvent être utilisées il est toujours sujet à changement, car il peut y avoir des erreurs ou des effets secondaires inattendus.

Dans la version 13, les versions expérimentales étaient importantes et attiraient l’attention. Cela a amené de nombreuses personnes à considérer l’intégralité de la version comme instable et expérimentale, mais ce n’est pas le cas. Next.js 13 est assez stable et permet une mise à niveau transparente à partir de la version 12 si vous n’avez pas l’intention d’adopter des API expérimentales. La plupart des changements peuvent être adoptés progressivement, ce que nous détaillerons plus loin dans cet article.

Résumé de la version

Avant de nous plonger dans ce que chaque annonce implique, passons en revue une liste rapide et équilibrons les expériences et les fonctionnalités stables.

Expérimental

• Répertoire des applications ;
• Nouvel emballeur (Turbopack);
• Optimisation des sources.

Constant

• « Nouveau » composant d’image pour remplacer l’ancien Image composant par défaut ;
• Prise en charge des modules ES pour next.config.mjs;
• « Nouveau » Link composant.

Le répertoire des applications

Cette fonctionnalité est en fait une réécriture architecturale majeure. Il place les composants serveur React au premier plan, tire parti d’un nouveau système de routage et de liaisons de routeur (sous next/navigation au lieu de next/router) et modifie l’intégralité de l’historique de récupération.

Tout cela est destiné à permettre d’importantes améliorations de performances, comme le rendu avec impatience de chaque partie de votre vue qui ne dépend pas des données tout en suspendre (vous avez bien lu !) les éléments qui reçoivent des données et qui sont traités sur le serveur.

En conséquence, cela apporte également un grand changement de modèle mental dans la façon dont vous concevez votre application Next.js.

Comparons comment les choses étaient et comment elles fonctionneront dans le répertoire de l’application. Lors de l’utilisation du /pages (l’architecture que nous avons utilisée jusqu’à présent), les données sont récupérées au niveau de la page et transmises en cascade aux composants de la feuille.

Au contraire, puisque le répertoire de l’application fonctionne avec les composants serveur, chaque composant est en charge de ses propres donnéesce qui signifie que maintenant vous pouvez récupérer puis rendre tous les composants dont vous avez besoin et les met en cache individuellement, en effectuant une régénération statique incrémentielle (ISR) à un niveau beaucoup plus granulaire.

De plus, Next.js apportera des optimisations : les requêtes seront dédupliquées (ce qui ne permettra pas à différents composants de déclencher la même requête en parallèle), grâce à un changement dans la manière dont fetch La méthode d’exécution fonctionne avec le cache. Par défaut, toutes les requêtes utiliseront une heuristique de mise en cache forte (« force-cache »), qui peut être remplacée via la configuration.

Vous avez bien lu. Next.js et React Server Components interfèrent avec le fetch standard pour fournir des optimisations de recherche de ressources.

Pas besoin d’aller tout-en-un

Il est important de noter que la transition de /pages pièces d’architecture /app cela peut être fait de manière incrémentielle, et les deux solutions peuvent coexister tant que les chemins ne se chevauchent pas. actuellement là aucune mention dans la feuille de route Next.js sur l’abandon de la prise en charge de /pages.

lecture recommandée: ISR vs DPR : Grands mots, explication rapide par Cassidy Williams

Nouveau package et benchmarks

Depuis sa première version, Next.js utilise webpack sous le capot. Cette année, nous avons vu apparaître une nouvelle génération de packages, écrits dans des langages de bas niveau, tels que ESBuild (qui alimente Vite), Parcel 2 (Rust) et d’autres. Nous avons également vu Vercel préparer le terrain pour un grand changement dans Next.js. Dans la version 12, ils ont ajouté SWC à leur processus de construction et de transpilation pour remplacer Babel et Terser.

Dans la version 13, ils ont annoncé Turbopack, un nouveau package écrit en Rust avec des revendications de performances très audacieuses. Oui, il y a eu une controverse sur Twitter à propos du package le plus rapide dans l’ensemble et de la manière dont ces repères ont été mesurés. Pourtant, il reste à débattre dans quelle mesure Turbopack peut réellement aider de grands projets écrits en Next.js avec une ergonomie bien meilleure que tout autre outil (avec une configuration intégrée pour commencer).

Cette fonctionnalité n’est pas seulement expérimentale, mais ne fonctionne en fait qu’avec next dev. Vous ne devriez pas (et à partir de maintenant ne pas pouvoir ) l’utiliser pour une version de production.

Optimisation des polices

Le nouveau @next/font Le module vous permet d’optimiser les performances de vos polices Web pendant la compilation. Vous téléchargerez les ressources sources au moment de la construction et les hébergerez vous-même /public dossier. Cela permettra d’économiser un aller-retour vers un autre serveur, d’éviter une poignée de main supplémentaire et, en fin de compte, de livrer votre source le plus rapidement possible et de la mettre en cache correctement avec le reste de vos ressources.

N’oubliez pas que lors de l’utilisation de ce package, il est important d’avoir une connexion Internet fonctionnelle lorsque vous exécutez votre version de développement pour la première fois afin de pouvoir la mettre correctement en cache ; sinon, il reviendra aux polices système si adjustFontFallback n’est pas configuré.

En outre, @next/font dispose d’un module spécial pour Google Web Fonts, facilement disponible car ils sont largement utilisés :

import { Jost } from '@next/font/google';
// get an object with font styles:
const jost = Jost();
// define them in your component:
<html className={jost.className}>

Le module fonctionnera également si vous utilisez des polices personnalisées :

import localFont from '@next/font/local';

const myFont = localFont({ src: './my-font.woff2' });

<html className={myFont.className}>

Bien que cette fonctionnalité soit encore en version bêta, elle est considérée comme suffisamment stable pour être utilisée en production.

Nouveaux composants d’image et de lien

Les composants les plus importants du package Next.js ont sans doute été légèrement remaniés. Suivant Image vit une double vie depuis Next.js 12 en @next/image Oui @next/future/image. Dans Next.js 13, le composant par défaut est modifié :

• next/image déménager à next/legacy/image;
• next/future/image déménager à next/image.

Cette modification s’accompagne d’un codemod, une commande qui tente de migrer automatiquement le code dans votre application. Cela permet une migration fluide lors de la mise à jour de Next.js :

npx @next/codemod next-image-to-legacy-image ./pages

Si vous effectuez cette modification et que vous n’avez pas configuré de test de régression visuelle, je vous recommande de consulter vos pages dans tous les principaux navigateurs pour voir si tout semble correct.

Pour le nouveau composant Link, le changement doit également être fluide. Les <a> élément à l’intérieur <Link> ce n’est pas nécessaire ni recommandé plus. Le codemod le supprimera ou ajoutera un legacyBehavior prendre en charge votre composant.

npx @next/codemod new-link ./pages

En cas d’échec du codemod, vous recevrez un avertissement de charpie dans le développeur, alors gardez un œil sur votre terminal !

Modules ES et transpilation automatique des modules

Il y a deux mises à jour qui sont passées inaperçues pour la plupart, mais je les considère particulièrement utile pour les personnes qui travaillent avec Monorepos. Jusqu’à présent, il n’était pas très ergonomique de partager la configuration entre les fichiers de configuration et les autres fichiers utilisables à l’exécution. C’est parce que next.config.js il est écrit avec CommonJS comme système de modules, qui ne peut pas être importé à partir de fichiers ESM. Désormais, Next.js prend en charge ESM en ajoutant simplement type: "module" pour vous package.json et renommer next.config.js → next.config.mjs.

Noter: Le « m » signifie « module » et fait partie de la spécification Node.js pour la prise en charge ESM.

Pour les Monorepos qui utilisent des packages internes (packages JavaScript qui ne sont pas publiés sur NPM, mais sont consommés à partir de la source par des applications sœurs au sein du monorepo), un plug-in spécial était nécessaire pour transpiler ces modules au moment de la compilation lorsqu’ils étaient consommés. À partir de Next.js 13, cela peut être corrigé sans plugin simplement en passant une propriété (expérimentale) à son next.config.mjs:

const nextConfig = {
  experimental: {
    transpilePackages: ['@my-org/internal-package'],
  },
};

Vous pouvez voir un exemple dans le modèle Apex-Monorepo. Avec cette configuration, il est possible de développer simultanément le composant de dépendance et son application sans aucune version ni solution de contournement.

Quoi Suivant?

Si vous êtes toujours intéressé à jouer et à parler davantage de ces fonctionnalités, j’organiserai une Masterclass Advanced Next.js du 30 novembre au 15 décembre 2022. Je serai très heureux de vous y accueillir et de répondre à toutes vos des questions!

Jusque-là, faites-le moi savoir dans les commentaires ci-dessous ou envoyez-moi un tweet @AtilaFassina sur la façon dont votre migration a été et vos réflexions sur les fonctionnalités expérimentales.

(vf, yk, il)