Next.js 16 Leçon 8 : Turbopack, React Compiler et optimisation

Turbopack : le nouveau bundler par défaut

Turbopack est le bundler développé par Vercel en Rust. Dans Next.js 16, il remplace Webpack comme bundler par défaut pour tous les nouveaux projets. Les gains sont significatifs sur des projets réels :

Comparaison des performances

                      Webpack      Turbopack    Gain
─────────────────────────────────────────────────
Démarrage dev         ~4 200ms     ~410ms       10x
Fast Refresh          ~800ms       ~80ms        10x
Build production      ~120s        ~28s         4x
Utilisation mémoire   ~1.2GB       ~380MB       3x

(Mesures sur une application ~500 composants)

File System Caching (beta)

La nouveauté majeure de Turbopack dans Next.js 16 : le cache sur disque. Les artefacts de compilation sont sauvegardés entre les redémarrages — plus besoin de tout recompiler après un Ctrl+C.

TypeScript next.config.ts

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  experimental: {
    // Active le cache disque Turbopack entre les redémarrages
    turbopackFileSystemCacheForDev: true,
  },
};

export default nextConfig;

💡

Premier démarrage vs suivants

Avec le file system cache, le premier npm run dev est normal. Mais dès le deuxième, Next.js réutilise le cache — le démarrage passe de ~400ms à ~80ms sur des projets larges. Le cache est stocké dans .next/cache/turbopack/.

React Compiler stable

Le React Compiler est désormais stable dans Next.js 16. Il analyse votre code et ajoute automatiquement la mémoïsation là où c’est utile — plus besoin d’écrire useMemo, useCallback ou React.memo manuellement.

Sans React Compiler

const filteredItems = useMemo(
  () => items.filter(i => i.active),
  [items]
);

const handleClick = useCallback(
  (id: string) => { onSelect(id); },
  [onSelect]
);

const ExpensiveList = React.memo(({ items }) => {
  return <ul>{items.map(i => <li>{i.name}</li>)}</ul>;
});

Avec React Compiler

// Le compilateur ajoute la mémoïsation
// automatiquement — vous écrivez du code simple

const filteredItems = items.filter(i => i.active);

function handleClick(id: string) {
  onSelect(id);
}

function ExpensiveList({ items }) {
  return <ul>{items.map(i => <li>{i.name}</li>)}</ul>;
}

TypeScript Activer le React Compiler — next.config.ts

npm install babel-plugin-react-compiler@latest

// next.config.ts
const nextConfig: NextConfig = {
  reactCompiler: true,
};

⚠️

Le React Compiler ralentit légèrement le build

Le Compiler s’appuie sur Babel pour analyser votre code, ce qui augmente les temps de build et de développement. Activez-le quand votre app a des problèmes de performance de re-rendu réels, pas par défaut sur tout nouveau projet.

Optimisation des images avec next/image

Le composant <Image> de Next.js 16 optimise automatiquement vos images : conversion WebP, redimensionnement à la demande, lazy loading natif et prévention du layout shift (CLS).

TypeScript Utilisation de next/image

import Image from 'next/image';

// Image locale (dans /public)
<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={630}
  priority    // précharge l'image above-the-fold
/>

// Image distante (configurer remotePatterns dans next.config.ts)
<Image
  src="https://images.unsplash.com/photo-xxx"
  alt="Photo"
  fill                 // remplit le conteneur parent (position: relative)
  className="object-cover"
/>

// Next.js 16 : minimumCacheTTL passe de 60s à 4h par défaut

Optimisation des polices avec next/font

TypeScript app/layout.tsx

import { Inter, Geist_Mono } from 'next/font/google';

// Téléchargé au build, auto-hébergé — zéro requête Google à runtime
const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
});

const mono = Geist_Mono({
  subsets: ['latin'],
  variable: '--font-mono',
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="fr" className={`${inter.variable} ${mono.variable}`}>
      <body className="font-sans">{children}</body>
    </html>
  );
}

Exercice pratique

Activez turbopackFileSystemCacheForDev: true et mesurez la différence de démarrage entre le 1er et le 2ème npm run dev
Activez le React Compiler et vérifiez dans les React DevTools que vos composants se mémoïsent
Remplacez toutes vos balises <img> par <Image> de next/image et observez les gains dans Lighthouse
Configurez next/font avec la police Inter et retirez tout import de Google Fonts côté client
Lancez npm run build et lisez les métriques de temps par étape dans le terminal