Next.js 15 : Guide Complet pour Migrer Votre Site en 2026

Pourquoi Migrer vers Next.js 15 en 2026

Next.js 15 représente une évolution majeure du framework React le plus populaire. Avec des gains de performance de 40%, un DX (Developer Experience) amélioré et des fonctionnalités orientées IA, la migration est un investissement stratégique.

Performance : Next.js 15 avec Turbopack est 2,4x plus rapide au build et 40% plus rapide au runtime que Next.js 13 (benchmark Vercel Labs).

Les Nouveautés Majeures de Next.js 15

• Turbopack stable : compilateur Rust ultra-rapide, remplacement de Webpack
• React 19 natif : Server Components, Actions, use() hook
• Partial Prerendering (PPR) : combinaison SSG + streaming SSR
• Improved caching : contrôle granulaire du cache avec staleTimes
• Enhanced Image component : optimisation automatique AVIF/WebP
• Middleware V2 : Edge Middleware plus puissant et flexible

Pré-requis et Préparation

Audit de Compatibilité

Avant de commencer, évaluez votre application actuelle :

# Vérifier votre version actuelle
npx next --version

# Lancer l'outil de migration automatique
npx @next/codemod@latest upgrade

# Analyser les dépendances incompatibles
npx npm-check-updates --filter "/next|react/"

Checklist Pré-Migration

• [ ] Node.js 20+ installé
• [ ] Toutes les dépendances à jour
• [ ] Tests unitaires et E2E passent
• [ ] Backup de la base de données
• [ ] Branche Git dédiée à la migration
• [ ] Environnement de staging prêt

Compatibilité des Dépendances

Vérifiez ces bibliothèques courantes :

| Bibliothèque | Compatible Next.js 15 | Action requise | |---|---|---| | next-auth | v5+ | Migration vers Auth.js | | next-intl | v4+ | Mise à jour | | @tanstack/react-query | v5+ | Compatible | | next-seo | Déprécié | Utiliser Metadata API | | styled-components | v6+ | Configurer SWC | | tailwindcss | v4+ | Compatible |

Migration Étape par Étape

Étape 1 : Mise à Jour des Dépendances

# Mettre à jour Next.js et React
pnpm add next@15 react@19 react-dom@19

# Mettre à jour les types TypeScript
pnpm add -D @types/react@19 @types/react-dom@19

# Mettre à jour ESLint
pnpm add -D eslint-config-next@15

Étape 2 : Configurer Turbopack

Remplacez votre configuration Webpack par Turbopack :

// next.config.ts (nouveau format TypeScript)
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  // Turbopack est maintenant le bundler par défaut
  // Plus besoin de experimental.turbo

  images: {
    formats: ['image/avif', 'image/webp'],
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**.example.com',
      },
    ],
  },

  // Nouveau : contrôle granulaire du cache
  experimental: {
    staleTimes: {
      dynamic: 30, // secondes
      static: 180,
    },
    ppr: true, // Partial Prerendering
  },
};

export default nextConfig;

Étape 3 : Migrer vers le App Router (si ce n'est pas fait)

Si vous êtes encore sur le Pages Router, c'est le moment de migrer :

Avant (Pages Router) :

// pages/blog/[slug].tsx
export async function getStaticProps({ params }) {
  const post = await getPost(params.slug);
  return { props: { post }, revalidate: 60 };
}

export default function BlogPost({ post }) {
  return <article>{post.title}</article>;
}

Après (App Router) :

// app/blog/[slug]/page.tsx
async function getPost(slug: string) {
  const res = await fetch(\`/api/posts/\${slug}\`, {
    next: { revalidate: 60 }
  });
  return res.json();
}

export default async function BlogPost({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = await getPost(slug);
  return <article>{post.title}</article>;
}

Étape 4 : Adapter les Server Components

Next.js 15 rend les Server Components le défaut. Marquez explicitement les composants interactifs :

// Composant serveur (défaut) — pas de directive nécessaire
export default async function ProductList() {
  const products = await db.products.findMany();

  return (
    <div>
      {products.map(p => (
        <ProductCard key={p.id} product={p} />
      ))}
      {/* Composant client pour l'interactivité */}
      <AddToCartButton />
    </div>
  );
}

// Composant client — directive obligatoire
'use client';

import { useState } from 'react';

export function AddToCartButton() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Ajouter ({count})
    </button>
  );
}

Étape 5 : Migrer les Server Actions

Next.js 15 stabilise les Server Actions pour les mutations de données :

// app/actions/contact.ts
'use server';

import { z } from 'zod';

const contactSchema = z.object({
  name: z.string().min(2),
  email: z.string().email(),
  message: z.string().min(10),
});

export async function submitContact(formData: FormData) {
  const data = contactSchema.parse({
    name: formData.get('name'),
    email: formData.get('email'),
    message: formData.get('message'),
  });

  await db.contacts.create({ data });

  return { success: true };
}

Étape 6 : Activer le Partial Prerendering (PPR)

Le PPR est la fonctionnalité la plus excitante de Next.js 15 :

// app/products/page.tsx
import { Suspense } from 'react';

// La partie statique est pré-rendue au build
export default function ProductsPage() {
  return (
    <div>
      <h1>Nos Produits</h1>
      <StaticProductGrid /> {/* SSG */}

      {/* La partie dynamique est streamée */}
      <Suspense fallback={<PriceSkeleton />}>
        <DynamicPrices /> {/* SSR streaming */}
      </Suspense>

      <Suspense fallback={<CartSkeleton />}>
        <UserCart /> {/* SSR streaming */}
      </Suspense>
    </div>
  );
}

Gestion des Breaking Changes

Changements dans les APIs Async

Next.js 15 rend certaines APIs asynchrones :

// AVANT (Next.js 14)
import { cookies, headers } from 'next/headers';

function OldWay() {
  const cookieStore = cookies();
  const headersList = headers();
}

// APRÈS (Next.js 15)
async function NewWay() {
  const cookieStore = await cookies();
  const headersList = await headers();
}

Changement du Comportement de Cache par Défaut

// AVANT : fetch était caché par défaut
fetch('/api/data'); // caché indéfiniment

// APRÈS : fetch n'est plus caché par défaut
fetch('/api/data'); // pas de cache
fetch('/api/data', { cache: 'force-cache' }); // cache explicite
fetch('/api/data', { next: { revalidate: 3600 } }); // ISR

Tests et Validation

Stratégie de Test Post-Migration

1. Tests unitaires : vérifiez que tous les composants se rendent correctement
2. Tests E2E : parcourez tous les flux utilisateur critiques
3. Tests de performance : comparez les métriques avant/après
4. Tests SEO : vérifiez le rendu SSR et les meta tags

# Lancer les tests
pnpm test

# Vérifier le build
pnpm build

# Analyser le bundle
npx @next/bundle-analyzer

Métriques à Comparer

| Métrique | Avant | Objectif Après | |---|---|---| | Build time | Baseline | -40% | | LCP | Baseline | -30% | | FID/INP | Baseline | -50% | | Bundle size | Baseline | -20% | | TTFB | Baseline | -25% |

Déploiement sans Downtime

Stratégie Blue-Green

1. Déployez la version Next.js 15 sur un environnement parallèle
2. Exécutez des tests de fumée automatisés
3. Basculez progressivement le trafic (10% → 50% → 100%)
4. Gardez l'ancien environnement prêt pour un rollback

Conclusion : La Migration en Vaut la Peine

La migration vers Next.js 15 est un investissement qui se rentabilise rapidement : performances améliorées, DX supérieur, et accès aux fonctionnalités de pointe comme le PPR et les Server Actions.

Besoin d'aide pour votre migration ? Lenobot est expert en Next.js et accompagne les entreprises dans leurs migrations sans interruption de service. Contactez-nous pour planifier votre migration.