Next.js 12.2

Nous posons les bases du futur de Next.js avec la version 12.2 :

• Middleware (Stable) : Routage dynamique pour toute votre application.
• ISR à la demande (Stable) : Mettez à jour votre contenu sans redéployer.
• Routes API Edge (Expérimental) : Des points d'API haute performance.
• SSR Edge (Expérimental) : Rendu serveur de votre application à la périphérie (Edge).
• Plugins SWC (Expérimental) : Étendez la compilation avec vos propres plugins.
• Améliorations de next/image : Incluant un nouveau composant next/future/image.

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

Middleware (Stable)

Nous sommes ravis d'annoncer que le Middleware est désormais stable dans la version 12.2 et dispose d'une API améliorée basée sur les retours des utilisateurs.

Le Middleware vous permet d'exécuter du code avant qu'une requête ne soit complétée. En fonction de la requête entrante, vous pouvez modifier la réponse en réécrivant, redirigeant, ajoutant des en-têtes ou en définissant des cookies.

import { NextRequest, NextResponse } from 'next/server';
 
// Si la requête entrante a le cookie "beta"
// alors nous réécrirons la requête vers /beta
export function middleware(req: NextRequest) {
  const isInBeta = JSON.parse(req.cookies.get('beta') || 'false');
  req.nextUrl.pathname = isInBeta ? '/beta' : '/';
  return NextResponse.rewrite(req.nextUrl);
}
 
// Prend en charge une seule valeur ou un tableau de correspondances
export const config = {
  matcher: '/',
};

Pour mettre à jour vers les dernières modifications de l'API Middleware, consultez le guide de migration.

Essayez le Middleware gratuitement sur Vercel ou en auto-hébergement avec next start.

ISR à la demande (Stable)

L'ISR à la demande vous permet de mettre à jour le contenu de votre site sans avoir besoin de redéployer. Cela facilite la mise à jour immédiate de votre site lorsque les données changent dans votre CMS headless ou plateforme e-commerce. C'était l'une des fonctionnalités les plus demandées par la communauté et nous sommes ravis qu'elle soit désormais stable.

export default async function handler(req, res) {
  // Vérifiez le secret pour confirmer que c'est une requête valide
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'Token invalide' });
  }
 
  try {
    await res.revalidate('/path-to-revalidate');
    return res.json({ revalidated: true });
  } catch (err) {
    // En cas d'erreur, Next.js continuera
    // à afficher la dernière page générée avec succès
    return res.status(500).send('Erreur lors de la revalidation');
  }
}

L'ISR fonctionne avec tous les fournisseurs prenant en charge l'API de build Next.js (next build). Lors du déploiement sur Vercel, la revalidation à la demande se propage globalement en ~300ms lors de l'envoi des pages à la périphérie.

Pour plus d'informations, consultez la documentation ou voyez notre démo pour voir la revalidation à la demande en action.

Routes API Edge (Expérimental)

Next.js prend désormais également en charge l'utilisation du Runtime Edge pour les routes API. Le Runtime Edge est un runtime plus léger que Node.js, offrant des démarrages rapides pour une faible latence. De plus, les routes API Edge prennent en charge les réponses en streaming depuis le serveur.

Vous pouvez définir le runtime pour une route API dans la config, en spécifiant soit nodejs (par défaut) soit experimental-edge :

import type { NextRequest } from 'next/server';
 
export default (req: NextRequest) => {
  return new Response(`Bonjour, depuis ${req.url} je suis maintenant une route API Edge !`);
};
 
export const config = {
  runtime: 'experimental-edge',
};

Comme le Runtime Edge est léger, il a des limitations pour accommoder les démarrages rapides - par exemple, il ne prend pas en charge les API spécifiques à Node.js comme fs. Par conséquent, le runtime par défaut pour les routes API reste nodejs.

Pour plus d'informations, consultez la documentation.

SSR Edge (Expérimental)

Next.js prend désormais en charge l'utilisation du Runtime Edge pour le rendu serveur.

Comme mentionné ci-dessus, le Runtime Edge est un runtime plus léger que Node.js, offrant des démarrages rapides pour une faible latence. Lorsqu'il est utilisé avec React 18, il permet le streaming du rendu serveur pour les pages.

Next.js utilise Node.js comme runtime par défaut pour le rendu côté serveur des pages. À partir de la version 12.2, si vous utilisez React 18, vous pouvez opter pour l'utilisation du Runtime Edge.

Vous pouvez définir le runtime globalement dans next.config.js, en spécifiant soit nodejs soit experimental-edge :

module.exports = {
  experimental: {
    runtime: 'experimental-edge',
  },
};

Changer le runtime par défaut des pages affecte toutes les pages, y compris les fonctionnalités de streaming SSR et de composants serveur. Vous pouvez également remplacer ce paramètre par défaut page par page, en exportant une config runtime :

export const config = {
  runtime: 'nodejs',
};
 
export default function Home() {}

Vous pouvez détecter quel runtime vous utilisez en examinant la variable d'environnement process.env.NEXT_RUNTIME pendant l'exécution, et en examinant la variable options.nextRuntime pendant la compilation webpack.

Pour plus d'informations, consultez la documentation.

Améliorations de next/image

Composant next/future/image (Expérimental)

Nous avons entendu vos retours sur le composant Image actuel et sommes heureux de partager un aperçu précoce du nouveau next/image. Ce nouveau composant image amélioré nécessite moins de JavaScript côté client et simplifie la façon dont vous stylisez les images :

• Affiche une seule balise <img> sans wrappers <div> ou <span>
• Ajout de la prise en charge de la prop style canonique
• Suppression des props layout, objectFit et objectPosition au profit de style ou className
• Suppression de l'implémentation IntersectionObserver au profit du chargement paresseux natif
• Suppression de la config loader au profit de la prop loader
• Note : pas de mode fill (pour l'instant) donc les props width et height sont requises

Cela améliore les performances car le loading="lazy" natif n'a pas besoin d'attendre l'hydratation React et le JavaScript côté client.

Pour plus d'informations, consultez la documentation.

Modèles distants (Expérimental)

next/image prend désormais en charge une option de configuration expérimentale remotePatterns qui vous permet de spécifier des wildcards pour les images distantes lors de l'utilisation de l'API d'optimisation d'image intégrée. Cela permet des correspondances plus puissantes au-delà de la configuration existante images.domains, qui ne fait que des correspondances exactes sur le nom de domaine.

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

Pour plus d'informations, consultez la documentation.

Désactiver l'optimisation d'images

L'API d'optimisation d'images sans configuration empêche l'utilisation de next export car elle nécessite un serveur pour optimiser les images à la demande lorsqu'elles sont requises. Jusqu'à présent, les utilisateurs ciblant next export devaient configurer le loader pour utiliser un fournisseur externe d'optimisation d'images, mais il n'y avait pas de solution claire si aucun fournisseur n'était disponible. À partir d'aujourd'hui, les utilisateurs de next export peuvent désactiver l'optimisation d'images pour toutes les instances de next/image avec une nouvelle propriété de configuration :

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

Plugins SWC (Expérimental)

Le Compilateur Next.js utilise SWC pour transformer et minifier votre code JavaScript pour la production. SWC a été introduit dans Next.js 12.0 pour améliorer à la fois le développement local et les performances de build.

Vous pouvez maintenant ajouter des plugins (écrits en WebAssembly) pour personnaliser le comportement de transformation SWC pendant la compilation :

module.exports = {
  experimental: {
    swcPlugins: [
      ['css-variable/swc', { displayName: true, basePath: __dirname }],
    ],
  },
};

Pour plus d'informations, consultez la documentation.

Améliorations du support de React 18

• Meilleur support pour les bibliothèques CSS-in-JS comme styled-components et emotion avec une expérience de mise à niveau plus fluide et sans changements cassants.
• L'AMP et l'optimisation post-HTML (optimisations CSS, polices) sont maintenant correctement pris en charge.
• next/head prend maintenant en charge React 18.
• L'annonceur de route de Next.js, utilisé pour annoncer correctement les transitions de page aux lecteurs d'écran et autres technologies d'assistance, prend maintenant en charge React 18.

Autres améliorations

• Support de la transformation Emotion dans le compilateur Next.js. La plupart des fonctionnalités de @emotion/babel-plugin sont maintenant prises en charge, et sauf si vous utilisez importMap, il peut être supprimé. Pour plus d'informations, consultez la documentation.
• Meilleur support pour la transformation styled-components dans le compilateur Next.js en permettant la personnalisation des options par défaut, y compris l'option cssProp. Pour plus d'informations, consultez la documentation.
• Meilleur support pour les modules ES JavaScript, afin que des composants comme next/image et next/link puissent être correctement importés.
• next/link ne nécessite plus d'ajouter manuellement <a> comme enfant. Vous pouvez maintenant opter pour ce comportement de manière rétrocompatible.
• Nous avons ajouté un support expérimental pour n'envoyer que du JavaScript moderne en modifiant browsersList. Vous pouvez activer ce comportement en définissant browsersListForSwc: true et legacyBrowsers: false dans l'option experimental de next.config.js.
• Les nouvelles optimisations de @swc/helpers empêchent la duplication entre les bundles, réduisant la taille du bundle d'environ 2KB dans une configuration minimale, et davantage sur les applications plus volumineuses.
• Nous avons considérablement réduit la taille d'installation de Next.js. Nous y sommes parvenus en déplaçant notre monorepo vers pnpm, ce qui nous permet de supprimer les packages dupliqués lors de la création des versions pré-compilées que nous utilisons. Cela entraîne une réduction de 14MB de la taille d'installation.
• Dans notre effort continu pour améliorer l'hébergement autonome de Next.js, nous stabilisons notre configuration expérimentale outputStandalone: true en output: 'standalone'. Cette configuration réduit considérablement les tailles de déploiement en n'incluant que les fichiers/actifs nécessaires, y compris en supprimant le besoin d'installer tous les node_modules dans le package de déploiement construit. Cette configuration peut être vue en action dans notre exemple with-docker.

RFC Layouts & Support avancé du routage

Au cas où vous l'auriez manqué, le mois dernier nous avons annoncé le RFC Layouts – la plus grande mise à jour de Next.js depuis son introduction en 2016, incluant :

• Layouts imbriqués : Construisez des applications complexes avec des routes imbriquées.
• Conçu pour les composants serveur : Optimisé pour la navigation dans les sous-arbres.
• Amélioration du chargement des données : Chargez dans les layouts tout en évitant les cascades.
• Utilisation des fonctionnalités React 18 : Streaming, Transitions et Suspense.
• Routage client et serveur : Routage centré serveur avec un comportement SPA-like.
• 100% adoptable progressivement : Aucun changement cassant pour une adoption graduelle.
• Conventions de routage avancées : Stockage hors écran, transitions instantanées et plus encore.

Pour plus d'informations, consultez le RFC ou donnez votre avis.

Merci aux contributeurs

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

Cette version a été rendue possible grâce aux contributions de : @huozhi, @ijjk, @kwonoj, @ViolanteCodes, @akrabdev, @timneutkens, @jpveilleux, @stigkj, @jgoping, @oof2win2, @Brooooooklyn, @CGamesPlay, @lfades, @molebox, @steven-tey, @SukkaW, @Kikobeats, @balazsorban44, @erikbrinkman, @therealmarzouq, @remcohaszing, @perkinsjr, @shuding, @hanneslund, @housseindjirdeh, @RobertKeyser, @styfle, @htunnicliff, @lukeshumard, @sagnik3, @pixelass, @JoshuaKGoldberg, @rishabhpoddar, @nguyenyou, @kdy1, @sidwebworks, @gnoff, @gaspar09, @feugy, @mfix-stripe, @javivelasco, @Chastrlove, @goncharov-vlad, @NaveenDA, @Firfi, @idkwhojamesis, @FLCN-16, @icyJoseph, @ElijahPepe, @elskwid, @irvile, @Munawwar, @ykolbin, @hulufei, @baruchadi, @imadatyatalah, @await-ovo, @menosprezzi, @gazs, @Exortions, @rubens-lopes, @woochul2, @stefee, @stmtk1, @jlarmstrongiv, @MaedahBatool, @jameshfisher, @fabienheureux, @TxHawks, @mattbrandlysonos, @iggyzap, @src200, @AkifumiSato, @hermanskurichin, @kamilogorek, @ben-xD, @dawsonbooth, @Josehower, @crutchcorn, @ericmatthys, @CharlesStover, @charlypoly, @apmatthews, @naingaungphyo, @alexandrutasica, @stefanprobst, @dc7290, @DilwoarH, @tommarshall, @stanhong, @leerob, @appsbytom, @sshyam-gupta, @saulloalmeida, @indicozy, @ArianHamdi, @Clariity, @sebastianbenz, @7iomka, @gr-qft, @Schniz, @dgagn, @sokra, @okbel, @tbvjaos510, @dmvjs, @PepijnSenders, @JohnPhamous, @kyliau, @eric-burel, @alabhyajindal, @jsjoeio, @vorcigernix, @clearlyTHUYDOAN, @splatterxl, @manovotny, @maxproske, @nvh95, @frankievalentine, @nuta, @bagpyp, @dfelsie, @qqpann, @atcastle, @jsimonrichard, @mass2527, @ekamkohli, @Yuddomack, @tonyspiro, @saurabhmehta1601, @banner4422, @falsepopsky, @jantimon, @henriqueholtz, @ilfa, @matteobruni, @ryscheng, @hoonoh, @ForsakenHarmony, @william-keller, @AleksaC, @Miikis, @zakiego, @radunemerenco, @AliYusuf95, et @dominiksipowicz.