Next.js 10.1

Nous sommes ravis de vous présenter Next.js 10.1, avec :

• Rafraîchissement 3x plus rapide : Rafraîchissement 200ms plus rapide sans aucune modification nécessaire.
• Temps d'installation amélioré : Taille d'installation réduite de 58% et 56% de dépendances en moins.
• Améliorations de next/image : Prise en charge d'Apple Silicon (M1), plus d'options de mise en page et de chargeur.
• Intégration Shopify à Next.js Commerce : Couche de données flexible pour les applications e-commerce composables.
• Page d'erreur 500 personnalisée : Ajoutez votre propre logo et identité visuelle aux pages d'erreur.
• Chargement strict de la configuration PostCSS : Meilleure mise en cache avec Webpack 5.
• Prise en charge de extends dans tsconfig.json : Configuration extensible pour les grandes applications TypeScript.
• Détection du mode prévisualisation : Affichez conditionnellement du contenu en mode prévisualisation.
• Défilement vers le haut des méthodes du routeur : Défilement automatique vers le haut, maintenant cohérent pour tout le routage.
• Améliorations de la documentation : Adoption progressive, migration et déploiement Docker.

Rafraîchissement 3x plus rapide

Depuis la version 9.4, Next.js intègre le Fast Refresh de Facebook en open-source pour un retour instantané sur les modifications apportées à vos composants React.

Cela signifie que Next.js ne met à jour que le code du fichier modifié et ne re-rend que ce composant, sans perdre son état. Cela inclut les styles (inline, CSS-in-JS ou CSS/Sass Modules), le balisage, les gestionnaires d'événements et les effets (via useEffect).

Aujourd'hui, nous le rendons 200ms plus rapide à chaque modification sans aucun changement de code de votre part. En moyenne, cela rend Fast Refresh 3x plus rapide.

Vous voulez des performances encore meilleures et des temps de build plus rapides ? Optez dès maintenant pour Webpack 5 avec un nouveau drapeau future. Ce drapeau est une version candidate (RC) et Webpack 5 deviendra bientôt la valeur par défaut. Après avoir activé ce drapeau, partagez vos retours avec nous.

module.exports = {
  future: {
    webpack5: true,
  },
};

Pour en savoir plus sur le déploiement rétrocompatible de Webpack 5 dans votre application, consultez la documentation.

Temps d'installation amélioré

Nous avons optimisé le graphe de dépendances de Next.js pour réduire le temps d'installation et la taille des dépendances. Il est maintenant plus rapide que jamais de créer un projet Next.js, localement et dans votre processus CI/CD.

Dans le cadre de notre objectif d'optimisation des dépendances, nous avons également mis à jour et/ou remplacé les packages npm marqués comme obsolètes par leurs auteurs - même lorsqu'ils étaient profondément imbriqués dans l'arborescence des dépendances. Une installation fraîche de Next.js 10.1 ne générera maintenant aucun avertissement de package.

Améliorations de next/image

Prise en charge d'Apple Silicon

Lorsque Next.js 10 est sorti, l'optimisation d'images était alimentée par une dépendance native. Cela entraînait un temps d'installation plus long, les dépendances natives consommant 50% de la taille totale d'installation de Next.js. De plus, cela supprime les scripts d'installation postérieurs et la compilation à la demande.

Nous sommes heureux de partager que l'optimisation automatique des images via next/image est maintenant alimentée par WebAssembly. Cette optimisation fonctionne immédiatement avec next dev et next start. En utilisant WASM, nous avons réduit la taille d'installation d'environ 30MB et ajouté la prise en charge des MacBooks Apple Silicon M1.

Nous continuons d'améliorer les performances de notre WebAssembly en tirant parti des extensions SIMD et du multi-threading.

Mises en page supplémentaires

Suite à vos retours, nous avons ajouté plusieurs nouvelles mises en page et options pour next/image :

• layout=fill : Vous n'avez pas besoin de fournir width et height. (Démo)
• layout=fixed : Comportement natif img. (Démo)
• layout=responsive : Largeur flexible avec rapport d'aspect fixe. (Démo)
• layout=intrinsic : Ne grandit pas, mais peut rétrécir avec un rapport d'aspect fixe. (Démo)
• objectFit=cover : Images de fond. (Démo)

Pour plus d'informations, consultez la documentation sur layout.

Meilleure prise en charge de l'optimisation d'images

Nous avons étendu les chargeurs d'images intégrés pour next/image avec la possibilité d'ajouter n'importe quel chargeur personnalisé. En utilisant la nouvelle prop loader, vous pouvez optimiser les images avec n'importe quel fournisseur ou CDN.

import Image from 'next/image';
 
const myLoader = ({ src, width, quality }) => {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`;
};
 
const MyImage = (props) => {
  return (
    <Image
      loader={myLoader}
      src="/me.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  );
};

Pour plus d'informations, consultez la documentation sur next/image.

Intégration Shopify à Next.js Commerce

Le e-commerce est l'un des secteurs qui adopte Next.js le plus rapidement. Des entreprises comme Apple, Wal-Mart, McDonald's et Nike font confiance à Next.js.

Nous voulions vous fournir un point de départ haute performance pour créer des applications e-commerce, nous avons donc lancé Next.js Commerce. Après des milliers de demandes pour Shopify, nous avons mis à jour Next.js Commerce avec une UI indépendante du fournisseur - vous permettant d'utiliser n'importe quelle solution e-commerce headless de votre choix.

Changer de fournisseur est un changement d'une seule ligne dans votre configuration. Nous avons également créé une API Features, vous permettant d'activer des fonctionnalités selon votre cas d'utilisation - tout en conservant des performances de premier ordre.

Métriques Lighthouse pour Next.js Commerce à travers le monde.

En quelques clics, les développeurs Next.js peuvent cloner, déployer et personnaliser entièrement leur propre boutique e-commerce. Apprenez-en plus sur nextjs.org/commerce et essayez notre Démo Shopify. La prise en charge d'autres fournisseurs e-commerce arrive bientôt.

Page d'erreur 500 personnalisée

Vous pouvez maintenant créer un fichier pages/500.js personnalisé pour ajouter votre propre logo et identité visuelle lors de l'affichage des erreurs. Similaire à pages/404.js, ce fichier est généré statiquement au moment du build.

export default function Custom500() {
  return <h1>500 - Erreur côté serveur</h1>;
}

Chargement strict de la configuration PostCSS

Si vous utilisez PostCSS et Webpack 5, vous pouvez améliorer les performances (via la mise en cache) avec un nouveau drapeau future.

module.exports = {
  future: {
    webpack5: true,
    strictPostcssConfiguration: true,
  },
};

Essayez-le dès aujourd'hui et faites-nous part de vos retours. Pour plus d'informations, consultez la documentation sur la configuration PostCSS.

Prise en charge de extends dans tsconfig.json

Vous pouvez maintenant utiliser extends dans le tsconfig.json utilisé par Next.js pour étendre à partir d'un autre tsconfig.json dans votre projet. Par exemple, vous pouvez étendre à partir d'un tsconfig.base.json dans votre projet comme suit :

{
  "extends": "./tsconfig.base.json"
}

Pour plus d'informations, consultez la documentation TypeScript.

Détection du mode prévisualisation

Vous pouvez maintenant détecter quand le mode prévisualisation est activé, vous permettant d'afficher certains composants uniquement pour les éditeurs.

import { useRouter } from 'next/router';
 
function MyComponent() {
  const { isPreview } = useRouter();
  return <>{isPreview ? <h1>Mode Prévisualisation Activé</h1> : null}</>;
}

Pour plus d'informations, consultez la documentation sur le mode prévisualisation.

Défilement vers le haut des méthodes du routeur

Lors de la navigation avec next/link, Next.js défile automatiquement vers le haut. Avec Next.js 10.1, router.push et router.replace défilent également automatiquement vers le haut pour correspondre au comportement de next/link. Vous pouvez désactiver le défilement automatique en utilisant l'option scroll.

Pour plus d'informations, consultez la documentation sur next/router.

Améliorations de la documentation

Nous avons également ajouté divers nouveaux guides, ressources et documentation, notamment :

• Adoption progressive de Next.js
• Migration depuis Gatsby
• Migration depuis Create React App
• Migration depuis React Router
• Authentification
• Déploiement avec Docker

Communauté

Nous sommes ravis de voir l'adoption continue de Next.js :

• Nous avons eu plus de 1 540 contributeurs indépendants, avec plus de 240 nouveaux contributeurs depuis la version 10.0
• Sur GitHub, le projet a été étoilé plus de 64 950 fois.

Rejoignez la communauté Next.js sur GitHub Discussions. Discussions est un espace communautaire qui vous permet de vous connecter avec d'autres utilisateurs Next.js et de poser librement des questions ou partager votre travail. Vous pouvez également rejoindre le Discord officiel de Next.js.

Crédits

Nous remercions notre communauté, y compris tous les retours externes et contributions qui ont aidé à façonner cette version.

Cette version a été rendue possible grâce aux contributions de : @shuding, @edazpotato, @laithyounes, @ijjk, @harshitsan, @selrond, @sromexs, @melono6, @timneutkens, @madou, @mottox2, @leerob, @divmain, @nblthree, @KennethKinLum, @KarthikeyanRanasthala, @alex-safian, @rishabhpoddar, @daviavmello, @jpalmieri, @merceyz, @Segolene-Alquier, @michrome, @janicklas-ralph, @Parnswir, @giraffesyo, @balazsorban44, @Cicada95, @vzaidman, @deniseyu, @eltociear, @unimprobable, @getspooky, @Timer, @armand1m, @alexknipfer, @elitan, @atcastle, @noahfschr, @amille44420, @laanayam333, @spidgorny, @devuxer, @Janpot, @nickbabcock, @rsipakov, @NkxxkN, @dominicfraser, @alevosia, @Kerumen, @CMeeg, @Pomaio, @tim-hanssen, @lachlanjc, @lebreRafael, @AryanBeezadhur, @guybedford, @petecorreia, @kaznak, @sam3d, @fwuensche, @rafaellaurindo, @sphilee, @styxlab, @rexxars, @smitbarmase, @maerzhase, @matamatanot, @lucleray, @jeremybalog, @tarunama, @zainfathoni, @destumme, @VictorAssis, @bhbs, @ciruz, @simnalamburt, @Almad, @frol, @ludofischer, @elliottsj, @Baheya, @Lalit2005, @vldmrkl, @AriFreyr, @kaykdm, @Sharcoux, @ramasilveyra, @devknoll, @botv, @pkellner, @sumanthratna, @sokra, @lfades, @thorwebdev, @berndartmueller, @davidspiessens, @ShashiSrinath, @elsigh, @MMT-LD, @hankandre, @maxnowack, @kmjennison, @darshkpatel, @mohsen1, @DylanRJohnston, @calmonr, @imrobinized, @justintemps, @ncarchedi, @btk, @faizanv, @chulkilee, @ryan-lustre, @dfelber, @Ymirke, @Robogeek95, @mcha-dev, @youngvform, @andrehsu, @Simply007, @rokobekavac0, @ja0n, @mattruby, @xom9ikk, @niko20, @LauraBeatris, @armspkt, @xiaooye, @sungpro, @awareness481, @joebernard, @jensmeindertsma, @donavon, @DaneTheory, @Zertz, @danielyefet, @lfender6445, @tajo, @jorrit, @tvler, @mustafaKamal-fe, @prateekbh, @gregrickaby, @enochndika, @zimv, @lharries, @JstnEdr, @zbialecki, @fredmontet, @leo, @kachkaev, @mongolyy, @justinphilpott, @mjr, @fireairforce, @jvarho, @gr-qft, @thomaswang, @c316, @benbender, @michael, @damusnet, @farhankk360, @smaktacular, @webda2l, @chibicode, @bar7b, @SiTaggart, @lolobosse, @jamesgeorge007, @nikosantis, @mikan3rd, @oshdev, @UnbearableBear, @tunesmith, @jamsinclair, @ivandotv, @Arthie, @louison, @FutureKode, @wesleytian, @dennismorello, @vispaduchuri, @styfle, @caulagi, @berekuk, @jescalan, @cascandaliato, @coetry, @PepijnSenders, @dkempner, @dlackty, @aralroca, @felixmeziere, @bmvantunes, @hideokamoto, @bram-l, @craigdanj, @ErikAugust, @joiglifberg, @blvdmitry, @bragle, @ykdojo, @vitorhsb, @TrySound, @mattfwood, @ka2jun8, @rfinkley, @bannier, @karlhorky, @shihabus, @yakovlevyuri, @dav-is, @lundgren2, @NoobTW, @Cow258, @toshi1127, @jorisw, @rifaidev, @willianjusten, @willheslam, @alexvilchis, @vitordino, @matthewlilley, @Prottoy2938, @brunocrosier, @OriginalEXE, @sidthesloth92, @davidsonsns, @saitolume, @tolfino, @iczero, @WestonThayer, @galanggg, @davidgolden, @weichienhung, @ashconnell, @callumbooth, @lyderichti59, @lukyth, @FredyC, @danielstocks, @valse, @MrJmpl3, @Sm1t, @lucas-varela, @jose-donato, @chr-ge, @pocorschi, @jflayhart, @aried3r, @LittleboyHarry, @Akumzy, @xeust, @tonyspiro, @yordis, @AmrSaber, @Mzaien, @PaulPCIO, @quinnturner, @SebastianTroc, @JipSterk, @developit, @yokinist, @queq1890, @oriverk, @ospira, @danielivert, @huv1k, @minhtule, @shunkakinoki, @khades, @eric-burel, @turadg, @huozhi, et @scottmacdonnell !