Next.js 16 : Turbopack par défaut, Cache Components et React 19.2

Vercel a publié Next.js 16 le 21 octobre 2025, marquant une évolution majeure du framework React le plus populaire. Cette version apporte des changements architecturaux significatifs : Turbopack devient le bundler par défaut, le système de cache est entièrement repensé, et React 19.2 introduit les View Transitions. Tour d'horizon complet des nouveautés et guide pratique pour la migration.

Turbopack : le nouveau standard

Après des années de développement et de stabilisation progressive, Turbopack devient officiellement le bundler par défaut de Next.js 16. Ce changement représente l'aboutissement d'un travail considérable : plus de 50% des sessions de développement et 20% des builds de production utilisaient déjà Turbopack dans les versions précédentes.

Des performances transformées

Les gains de performance sont substantiels :

• Builds de production 2 à 5 fois plus rapides
• Fast Refresh jusqu'à 10 fois plus rapide
• Aucune configuration requise

Pour les projets existants, Turbopack s'active automatiquement. Si vous rencontrez des problèmes de compatibilité, le retour à Webpack reste possible :

next dev --webpack
next build --webpack

Cache système de fichiers (beta)

Next.js 16 introduit également un cache système de fichiers pour Turbopack, accélérant encore les compilations entre les redémarrages du serveur de développement :

// next.config.ts
const nextConfig = {
  experimental: {
    turbopackFileSystemCacheForDev: true,
  },
};

export default nextConfig;

Cache Components : la fin du caching implicite

Le changement le plus significatif de Next.js 16 concerne la gestion du cache. Le framework abandonne le modèle de caching implicite (source de confusion pour de nombreux développeurs) au profit d'un système explicite et opt-in.

La directive "use cache"

La nouvelle directive "use cache" permet de marquer explicitement ce qui doit être mis en cache :

// Composant caché
async function ProductList() {
  "use cache";
  const products = await fetchProducts();
  return <div>{/* ... */}</div>;
}

// Fonction cachée
async function getUser(id: string) {
  "use cache";
  return await db.users.find(id);
}

Activation

Pour utiliser les Cache Components, activez l'option dans votre configuration :

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

export default nextConfig;

Philosophie du changement

Ce changement reflète une leçon apprise : le caching implicite des versions précédentes créait des comportements imprévisibles. Désormais, tout le code dynamique s'exécute à chaque requête par défaut. Le développeur choisit explicitement ce qu'il veut cacher, rendant le comportement de l'application prévisible.

Nouvelles APIs de cache

Next.js 16 enrichit les APIs de gestion du cache avec trois fonctions complémentaires.

revalidateTag() amélioré

La fonction revalidateTag() requiert maintenant un profil cacheLife pour le comportement stale-while-revalidate :

import { revalidateTag } from 'next/cache';

// Profils intégrés
revalidateTag('blog-posts', 'max');      // Cache longue durée
revalidateTag('news-feed', 'hours');     // Quelques heures
revalidateTag('analytics', 'days');      // Plusieurs jours

// Profil personnalisé
revalidateTag('products', { expire: 3600 });

updateTag() : read-your-writes

La nouvelle fonction updateTag() garantit que l'utilisateur voit immédiatement ses modifications :

'use server';
import { updateTag } from 'next/cache';

export async function updateUserProfile(userId: string, profile: Profile) {
  await db.users.update(userId, profile);
  updateTag(`user-${userId}`); // Changements visibles immédiatement
}

refresh() : données dynamiques uniquement

La fonction refresh() rafraîchit uniquement les données non cachées, idéale pour les compteurs et métriques :

'use server';
import { refresh } from 'next/cache';

export async function markNotificationAsRead(notificationId: string) {
  await db.notifications.markAsRead(notificationId);
  refresh(); // Rafraîchit compteurs et statuts
}

React 19.2 et ses nouveautés

Next.js 16 intègre React 19.2, apportant plusieurs fonctionnalités très attendues.

View Transitions

Les View Transitions permettent d'animer les éléments lors des navigations et mises à jour d'état :

import { ViewTransition } from 'react';

function ProductCard({ product }) {
  return (
    <ViewTransition name={`product-${product.id}`}>
      <div className="product-card">
        <img src={product.image} alt={product.name} />
        <h3>{product.name}</h3>
      </div>
    </ViewTransition>
  );
}

Les transitions s'animent automatiquement lorsque l'élément change de position ou de taille entre deux rendus.

useEffectEvent

Le hook useEffectEvent permet d'extraire la logique non réactive des Effects :

import { useEffectEvent } from 'react';

function ChatRoom({ roomId, theme }) {
  const onMessage = useEffectEvent((message) => {
    showNotification(message, theme); // Toujours le theme actuel
  });

  useEffect(() => {
    const connection = createConnection(roomId);
    connection.on('message', onMessage);
    return () => connection.disconnect();
  }, [roomId]); // theme n'est pas une dépendance
}

Activity

Le composant Activity permet de rendre du contenu en arrière-plan tout en maintenant son état :

import { Activity } from 'react';

function TabContainer({ activeTab }) {
  return (
    <>
      <Activity mode={activeTab === 'home' ? 'visible' : 'hidden'}>
        <HomeTab />
      </Activity>
      <Activity mode={activeTab === 'profile' ? 'visible' : 'hidden'}>
        <ProfileTab />
      </Activity>
    </>
  );
}

Les onglets cachés conservent leur état et leurs subscriptions sont nettoyées.

React Compiler stable

Le React Compiler atteint la stabilité avec sa version 1.0 et s'intègre nativement à Next.js 16 :

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

export default nextConfig;

Le compilateur mémoize automatiquement les composants, éliminant les re-renders inutiles sans intervention manuelle. Plus besoin de useMemo, useCallback ou React.memo dans la plupart des cas.

proxy.ts remplace middleware.ts

Next.js 16 introduit proxy.ts pour remplacer middleware.ts, clarifiant la limite réseau de l'application.

Migration

Renommez simplement votre fichier et la fonction exportée :

// Avant: middleware.ts
export function middleware(request: NextRequest) {
  return NextResponse.redirect(new URL('/home', request.url));
}

// Après: proxy.ts
export default function proxy(request: NextRequest) {
  return NextResponse.redirect(new URL('/home', request.url));
}

Le proxy s'exécute sur le runtime Node.js, offrant un accès complet à l'écosystème npm. L'ancien middleware.ts est déprécié et sera supprimé dans une future version.

Next.js DevTools MCP

Next.js 16 intègre le Model Context Protocol pour le débogage assisté par IA. Cette fonctionnalité permet aux agents IA (comme Claude ou GPT) de diagnostiquer les problèmes avec une connaissance contextuelle de votre application.

Fonctionnalités disponibles :

• Connaissance du routing, caching et rendering Next.js
• Logs unifiés navigateur et serveur
• Accès automatique aux stack traces
• Conscience du contexte de route actif

Améliorations du routing

Layout Deduplication

Les layouts partagés sont désormais téléchargés une seule fois lors du prefetching. Pour une page avec 50 liens produits partageant le même layout, ce dernier n'est téléchargé qu'une fois au lieu de 50.

Incremental Prefetching

Le système de prefetch devient plus intelligent :

• Télécharge uniquement les parties manquantes du cache
• Annule les requêtes si le lien quitte le viewport
• Priorise selon le hover et la ré-entrée dans le viewport

Breaking changes

Next.js 16 apporte plusieurs changements incompatibles à prendre en compte.

Versions minimales requises

Params et searchParams asynchrones

Les props params et searchParams doivent maintenant être attendues :

// Avant
export default function Page({ params }) {
  const { id } = params;
}

// Après
export default async function Page({ params }) {
  const { id } = await params;
}

Suppressions

• Support AMP : complètement supprimé
• next lint : utilisez ESLint ou Biome directement
• experimental.ppr : remplacé par Cache Components
• Scroll smooth automatique : ajoutez data-scroll-behavior="smooth"

Changements d'images

Guide de migration

Migration automatisée (recommandée)

npx @next/codemod@canary upgrade latest

Le codemod gère automatiquement la plupart des migrations : params/searchParams asynchrones, renommage middleware vers proxy, mise à jour des APIs dépréciées.

Migration manuelle

npm install next@latest react@latest react-dom@latest

Puis suivez le guide de migration pour chaque breaking change.

Retours d'expérience

Les retours de la communauté sont mitigés mais globalement positifs. Certains développeurs rapportent une migration en quelques heures pour des projets simples, tandis que d'autres ont nécessité plusieurs jours pour des applications monolithiques multi-tenant. Les gains de performance post-migration sont unanimement salués.

Conclusion

Next.js 16 représente une maturation significative du framework. Turbopack par défaut améliore drastiquement l'expérience développeur, le système de cache explicite élimine une source majeure de bugs, et React 19.2 apporte des fonctionnalités longtemps attendues comme les View Transitions.

La migration demande un effort variable selon la complexité de votre application, mais les codemods automatisés facilitent grandement le processus. Pour les nouveaux projets, Next.js 16 offre une base solide et performante.

Pour démarrer un nouveau projet :

npx create-next-app@latest

La documentation complète est disponible sur nextjs.org, incluant des guides détaillés pour chaque nouvelle fonctionnalité et breaking change.