Next.js 16 est sorti et ça change TOUT

Next.js 16 vient de sortir et il y a des changements critiques que tu dois absolument connaître avant de mettre à jour tes apps.

Je ne vais pas te lister toutes les features comme le blog post officiel. Je vais me concentrer sur ce qui compte vraiment pour ton travail au quotidien.

Le changement CRITIQUE : Tout est async maintenant

C'est LE changement qui va casser ton code si tu fais pas attention.

params, searchParams, cookies(), headers(), et draftMode() sont maintenant async.

// ❌ Ça ne marche plus
export default function Page({ params, searchParams }) {
  const cookieStore = cookies();
  // ...
}

// ✅ Tu dois tout await
export default async function Page({
  params,
  searchParams,
}: {
  params: Promise<{ id: string }>;
  searchParams: Promise<Record<string, string>>;
}) {
  const { id } = await params;
  const search = await searchParams;
  const cookieStore = await cookies();
  const headersList = await headers();
  // ...
}

Pourquoi ce changement ? NextJS veut être plus explicite sur ce qui rend ta page dynamique. Avant, utiliser cookies() rendait automatiquement ta page dynamique, ce qui était confus.

Maintenant, une page est dynamique uniquement si elle await quelque chose de dynamique.

Pas de panique - il y a un codemod

Lance cette commande et ça va gérer 90% du travail :

npx @next/codemod@canary upgrade latest

Le codemod va automatiquement ajouter await où il faut et mettre à jour tes définitions de types.

Turbopack est maintenant par défaut (et c'est RAPIDE)

Tu te souviens quand Turbopack était en expérimental ? Eh bien, c'est maintenant le bundler par défaut dans Next.js 16.

Je l'utilise depuis un moment et je vais être honnête : c'est significativement plus rapide.

• Les builds de production sont 2-5× plus rapides
• Le Fast Refresh est jusqu'à 10× plus rapide
• Déjà utilisé par 50% des utilisateurs de Next.js 15

Le meilleur ? Tu n'as rien à faire. C'est automatique.

Si pour une raison tu as besoin de webpack (pour du debug) :

next build --webpack

File System Caching (Beta)

Pour les gros projets, il y a une nouvelle feature expérimentale qui cache les résultats de compilation sur le disque :

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

export default nextConfig;

Ça veut dire que quand tu redémarres ton serveur de dev, il ne recompile pas tout depuis zéro. Énorme gain de temps.

Nouvelles APIs de cache que tu vas vraiment utiliser

Next.js 16 introduit quelques nouvelles APIs pour la gestion du cache qui résolvent de vrais problèmes.

revalidateTag() nécessite maintenant un deuxième argument

Si tu utilises revalidateTag(), tu dois le mettre à jour :

// ❌ Avant
revalidateTag("blog-posts");

// ✅ Après - ajoute un profil cacheLife
revalidateTag("blog-posts", "max"); // Durée de cache max
revalidateTag("blog-posts", "hours"); // Cache basé sur les heures
revalidateTag("blog-posts", { revalidate: 3600 }); // Custom

updateTag() pour les mises à jour immédiates

Nouvelle API qui invalide le cache ET rafraîchit immédiatement. Parfait pour les Server Actions :

"use server";

import { updateTag } from "next/cache";

export async function updateUserProfile(userId: string, data: any) {
  await db.users.update(userId, data);

  // Invalide le cache et rafraîchit l'UI immédiatement
  updateTag(`user-${userId}`);
}

C'est ce que tu veux utiliser quand un utilisateur soumet un formulaire et que tu veux voir les changements tout de suite.

Important : Node.js 20.9+ est maintenant requis

Node.js 18 n'est plus supporté. Tu dois upgrader vers Node.js 20.9 ou plus.

Si tu es encore sur 18, tu devras upgrader avant de pouvoir utiliser Next.js 16.

Et "use cache" alors ?

Il y a une nouvelle directive "use cache" qui te permet de cacher des composants spécifiques, mais honnêtement, j'attends de voir comment ça se passe dans le monde réel avant de le recommander.

L'idée c'est que tu peux marquer un composant avec "use cache" et il sera caché automatiquement, même si la page est dynamique.

"use cache";

export default async function ProductList() {
  const products = await getProducts();
  return <div>{/* ... */}</div>;
}

Tu dois l'activer dans ta config :

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

Je ferai un article dédié dessus une fois que je l'aurai testé plus en profondeur.

Tu dois upgrader ?

Oui si :

• Tu veux des builds plus rapides (Turbopack vaut le coup à lui tout seul)
• Tu es à l'aise pour lancer le codemod et tester ton app
• Tu es déjà sur Node.js 20+

Attends si :

• Tu as une grosse codebase et tu veux attendre que les early adopters trouvent les bugs
• Tu es sur Node.js 18 et tu ne peux pas upgrader pour l'instant
• Tu utilises AMP (il a été supprimé)

Checklist de migration rapide

Voici ce que tu dois faire :

1. Upgrader Node.js vers 20.9+
2. Lancer npx @next/codemod@canary upgrade latest
3. Corriger les erreurs de type restantes (params/searchParams)
4. Mettre à jour les appels à revalidateTag() pour inclure le deuxième argument
5. Tester ton app en profondeur

Le codemod va gérer la majorité du travail, mais tu devras quand même vérifier quelques trucs manuellement.

Conclusion

Next.js 16 est une bonne mise à jour. Les changements async sont chiants mais nécessaires, et Turbopack par défaut c'est une énorme victoire.

L'essentiel ? Pas de panique. Lance le codemod, teste ton app, et ça va bien se passer.

Si tu veux maîtriser Next.js et créer des applications fullstack modernes, j'ai une formation gratuite qui va t'aider à progresser rapidement :