Next.js 12.3

Nous avons apporté des améliorations qualité de vie à Next.js avec la version 12.3 :

• Fast Refresh amélioré : Les fichiers .env, jsconfig.json et tsconfig.json prennent maintenant en charge le rechargement à chaud.
• Installation automatique de TypeScript : Ajoutez un fichier .ts pour configurer automatiquement TypeScript et installer les dépendances.
• Composant Image : next/future/image est maintenant stable.
• Minificateur SWC : La minification avec le compilateur Next.js est maintenant stable.
• Mise à jour du nouveau routeur et des layouts : L'implémentation a commencé et les nouvelles fonctionnalités sont expliquées.

Mettez à jour dès aujourd'hui en exécutant npm i next@latest.

Annonce de la troisième conférence communautaire mondiale Next.js le 25 octobre. Inscrivez-vous maintenant →

Next.js Conf

Vous êtes invité à la conférence communautaire mondiale Next.js le 25 octobre. Pour le 6ème anniversaire de Next.js, nous présenterons :

• Des fonctionnalités exploitant les React Server Components, le Streaming et Suspense.
• Des conventions facilitant l'optimisation et la montée en charge des applications pour les développeurs.
• Des outils open-source accélérant le développement local et les builds de production.

Obtenez votre billet gratuit et découvrez l'avenir de Next.js et React, puis suivez @nextjs pour plus d'annonces prochainement. Nous recherchons également des talks communautaires. Soumettez une proposition de talk et partagez l'histoire de ce que vous construisez avec Next.js.

Installation automatique de TypeScript

Next.js intègre désormais la configuration automatique de TypeScript. Auparavant, l'ajout de TypeScript à un projet existant nécessitait l'installation manuelle des dépendances.

Avec cette version, Next.js détecte automatiquement l'ajout de fichiers TypeScript, installe les dépendances nécessaires et ajoute un fichier tsconfig.json. Cela fonctionne lors de l'exécution de next dev et next build.

Vidéo montrant Next.js installant automatiquement TypeScript.

Fast Refresh amélioré

Les itérations rapides sont essentielles pour votre workflow de développement local. Next.js utilise Fast Refresh pour un retour instantané sur les modifications apportées à vos composants React. Sauvegardez et voyez vos changements reflétés dans le navigateur sans avoir besoin de recharger la page.

Avec Next.js 12.3, certains fichiers de configuration prennent également en charge le rechargement à chaud lors des modifications, notamment :

• .env et ses variantes env.*
• jsconfig.json
• tsconfig.json

Vous n'avez plus besoin de redémarrer votre serveur de développement local lors des modifications de ces fichiers de configuration.

Vidéo montrant Next.js rechargant à chaud un fichier .env.

Composant Image

Composant next/future/image (Stable)

Dans Next.js 12.2, nous avons partagé une préversion expérimentale d'un nouveau composant Image simplifiant le style des images et améliorant les performances grâce au lazy loading natif du navigateur.

Le nouveau composant Image est maintenant stable et ne nécessite plus de flag expérimental.

Depuis la dernière version, nous avons apporté des améliorations supplémentaires :

• Ajout du mode de layout fill permettant à l'image de remplir l'élément parent.
• Amélioration du placeholder flou qui fonctionne désormais avec les images transparentes, ne nécessite plus <noscript>, et correspond entre next dev et next start.
• Prévention des décalages de layout subtils (navigateurs autres que Chrome) en masquant le texte alt pendant le chargement.
• Propriété alt obligatoire pour une meilleure accessibilité.
• Correction de la propriété onError en cas d'erreur avant l'hydratation.
• Correction du ratio d'aspect pour les images importées statiquement avec uniquement width ou height.
• Amélioration des messages d'erreur pour les mauvaises configurations.

À l'avenir, nous prévoyons de renommer next/image en next/legacy/image et next/future/image en next/image. Cela offrira une excellente expérience pour les nouveaux projets Next.js, tandis que les projets existants pourront migrer facilement avec notre codemod next/image. Nous fournirons plus de détails avant la prochaine version majeure.

Pour plus d'informations sur son utilisation actuelle, consultez la documentation incluant un guide de migration.

Modèles distants (Stable)

remotePatterns permet de spécifier des wildcards pour les images distantes avec l'API d'optimisation d'image intégrée. Cela permet un matching plus puissant que images.domains, qui ne fait que des correspondances exactes sur le nom de domaine.

Cette option est maintenant stable et peut être utilisée avec la configuration suivante :

module.exports = {
  images: {
    remotePatterns: [
      {
        // Le hostname de la propriété `src` doit se terminer par `.example.com`,
        // sinon l'API répondra avec 400 Bad Request.
        protocol: 'https',
        hostname: '**.example.com',
      },
    ],
  },
};

Désactivation de l'optimisation d'image (Stable)

L'API d'optimisation d'image nécessite un serveur pour optimiser les images à la demande. Cela fonctionne parfaitement en auto-hébergement avec next start ou sur des plateformes comme Vercel. Cependant, cela ne fonctionne pas avec next export car il n'inclut pas de serveur. Auparavant, il fallait configurer un fournisseur tiers via la prop loader, mais maintenant vous pouvez désactiver complètement l'optimisation via next.config.js pour toutes les instances de next/image.

Cette option précédemment expérimentale est maintenant stable :

module.exports = {
  images: {
    unoptimized: true,
  },
};

Minificateur SWC (Stable)

Dans Next.js 12, nous avons introduit la minification via SWC comme fonctionnalité expérimentale du compilateur Next.js. Les premiers résultats montraient que la minification avec SWC était 7 fois plus rapide qu'avec Terser.

Avec cette version, la fonctionnalité est stable et peut être activée via :

module.exports = {
  swcMinify: true,
};

Nous prévoyons de rendre le minificateur SWC par défaut dans la prochaine version majeure.

Mise à jour du nouveau routeur et des layouts

Plus tôt cette année, nous avons publié le RFC Layouts introduisant la plus grande mise à jour de Next.js depuis 2016. Ces changements incluent un nouveau routeur basé sur les React Server Components. L'implémentation a commencé et nous visons une bêta publique dans la prochaine version majeure.

Aujourd'hui, nous partageons plus d'informations sur les fonctionnalités à venir :

• Groupes de routes : Pour exclure des routes des layouts et organiser les routes sans affecter les URLs.
• États de chargement instantanés : Nouvelle convention de fichier pour ajouter facilement des UI de chargement avec Suspense.
• Gestion des erreurs : Nouvelle convention pour ajouter des Error Boundaries imbriqués et des UI d'erreur.
• Modèles : Nouvelle convention pour ajouter des UI partagées créant des instances distinctes sans état partagé.
• Routes d'interception, Routes parallèles et Routes conditionnelles : Nouvelles conventions pour des patterns de routage avancés.

De plus, dans un autre RFC, nous explorons l'ajout du support des imports CSS globaux dans le nouveau répertoire app. Cela permettrait d'utiliser des packages important leurs propres fichiers .css sans configuration supplémentaire.

En savoir plus dans le RFC Layouts.

Autres améliorations

• Nouvelle documentation sur les fonctionnalités d'accessibilité intégrées à Next.js.
• Les templates create-next-app incluent désormais le support automatique du mode sombre selon la préférence système.
• src/ est maintenant un répertoire de linting par défaut avec le support ESLint intégré.
• next.config.js inclut maintenant une validation de schéma avec ajv pour prévenir les mauvaises utilisations.
• next.config.js a un nouveau flag expérimental fallbackNodePolyfills: false pour éviter le polyfill des APIs Node.js côté navigateur (réduisant la taille des bundles). Cette option affiche une erreur de build indiquant l'origine de l'import inutile.

Communauté

Next.js est le résultat du travail combiné de plus de 2 000 développeurs, de partenaires industriels comme Google Chrome et Meta, et de notre équipe core chez Vercel.

Cette version a été rendue possible grâce aux contributions de : @pthomas931, @madmed88, @sanjaiyan-dev, @balazsorban44, @DonghyukJacobJang, @chaiwattsw, @styfle, @dunglas, @ahkhanjani, @promer94, @terrierscript, @shawncal, @insik-han, @QuiiBz, @ykzts, @JoshuaKGoldberg, @lucasassisrosa, @dikwickley, @Brooooooklyn, @sicarius97, @FourwingsY, @manovotny, @SukkaW, @pepoeverton, @jdeniau, @sumiren, @anthonyshew, @pekarja5, @huozhi, @leerob, @fediev, @atcastle, @shuding, @feugy, @jonohewitt, @zakiego, @Schniz, @timneutkens, @wyattjoh, @MaedahBatool, @X7Becka, @nnnnoel, @dcdev67, @alvinometric, @timothympace, @jeferson-sb, @ijjk, @theMosaad, @Yuddomack, @msquitieri, @andreizanik, @nix6839, @thomasballinger, @ziishaned, @xyeres, @nyedidikeke, @maxproske, @sokra, @titusdmoore, @thebergamo, @fikrikarim, @Kikobeats, @clearlyTHUYDOAN, @nasso, @qutek, @kdy1, @kyliau, @housseindjirdeh, @barissayil, @seveibar, @Jessidhia, @santidalmasso, @JohnDaly, @Nikhilnama18, @mduleone, @colinhacks, @ductnn, @josh, @hiro0218, @eltociear, @kwonoj, @valcosmos, @mihaic195, @stefanprobst, @KATT, @thiagomorales, @danielcavanagh, @steven-tey, @hellomhc, @trevor-fauna, @nguyenyou, @eminvergil, @lobsterkatie, @dorian-davis, @sambecker, @isaac-martin, @lfades, @amorimr, @javivelasco, @mongolyy, @Thisen, @zorrolisto, @ethomson, @padmaia, @thisisjofrank, @dominiksipowicz, @awareness481, @pakaponk, @apledger, @longzheng, @tknickman, @rbrcsk, @emersonlaurentino, @carstenlebek, @edusig, @riccardogiorato, @hanneslund, @ryanhaticus, @j-mendez, @armandabric, @WinmezzZ, @andershagbard, @dammy001, @MarDi66, @okmttdhr, @rishabhpoddar, @marjorg, @dustinsgoodman, et @zanechua.