Next.js

Next.js 15 : guide complet App Router, Server Components et nouveautés (2026)

Publié le 21 February 2026 · Mis à jour le 30 March 2026 — 4 min de lecture

En bref

Next.js 15 apporte des améliorations majeures au App Router, aux React Server Components et au caching. Ce guide complet vous explique les concepts clés, les nouveautés et comment migrer depuis les versions précédentes.

Next.js 15 est sorti en octobre 2024 et change considérablement la façon de développer des applications React. Si vous démarrez un projet Next.js aujourd’hui, voici tout ce que vous devez savoir.

App Router vs Pages Router : que choisir en 2026 ?

Depuis Next.js 13, l’App Router (répertoire app/) est la voie recommandée. Le Pages Router (pages/) reste supporté mais n’évolue plus. En 2026, tous les nouveaux projets doivent utiliser l’App Router. La migration depuis Pages Router est possible mais demande un effort non négligeable.

React Server Components (RSC)

La grande révolution du App Router : tous les composants sont des Server Components par défaut. Ils s’exécutent côté serveur, ont accès direct à la base de données, et n’envoient pas de JavaScript côté client. Pour les composants interactifs (état, événements), ajoutez la directive "use client" :

// ServerComponent.tsx — s'exécute côté serveur, zéro JS client
async function ArticleList() {
  const articles = await db.article.findMany(); // accès DB direct !
  return <ul>{articles.map(a => <li key={a.id}>{a.title}</li>)}</ul>;
}

// ClientComponent.tsx — s'exécute côté client
"use client";
import { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

Le système de cache Next.js 15 (simplifié)

Next.js 15 a simplifié son système de cache par rapport à Next.js 14. Les requêtes fetch() ne sont plus mises en cache par défaut — vous devez l’indiquer explicitement :

// Pas de cache (nouveau comportement par défaut Next.js 15)
const data = await fetch('https://api.example.com/data');

// Cache statique (comme getStaticProps)
const data = await fetch('https://api.example.com/data', { cache: 'force-cache' });

// ISR : revalidation toutes les heures
const data = await fetch('https://api.example.com/data', { next: { revalidate: 3600 } });

Layouts et templates

L’App Router permet des layouts imbriqués. Un layout enveloppe sa route et toutes ses routes enfants, en conservant son état lors de la navigation :

// app/layout.tsx — layout racine (obligatoire)
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="fr">
      <body>
        <header><nav>...</nav></header>
        <main>{children}</main>
        <footer>...</footer>
      </body>
    </html>
  );
}

// app/blog/layout.tsx — layout spécifique au blog
export default function BlogLayout({ children }) {
  return <div className="blog-container">{children}</div>;
}

Server Actions

Next.js 15 stabilise les Server Actions : des fonctions serveur appelables directement depuis les composants React, sans avoir besoin de créer une API route :

"use server";
async function createArticle(formData: FormData) {
  const title = formData.get('title') as string;
  await db.article.create({ data: { title } });
  revalidatePath('/blog');
}

// Dans un composant client
<form action={createArticle}>
  <input name="title" />
  <button type="submit">Créer</button>
</form>

Métadonnées SEO

La gestion des balises SEO est simplifiée dans l’App Router :

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const article = await getArticle(params.slug);
  return {
    title: article.title + ' | Mon Blog',
    description: article.excerpt,
    openGraph: { images: [article.image] }
  };
}

Turbopack : le nouveau bundler

Next.js 15 utilise Turbopack (basé sur Rust) par défaut en développement. Résultat : le démarrage du serveur de dev passe de 10-30 secondes à moins de 2 secondes sur les gros projets. Le build de production utilise encore Webpack mais Turbopack progresse vers une compatibilité complète en production.

Besoin d’un expert ? Développeur Next.js Paris →

Questions fréquentes

Next.js 15 ou Next.js 14 : faut-il migrer ?

Next.js 15 est la version stable actuelle avec des améliorations importantes du compilateur Turbopack (désormais stable), des améliorations du cache (opt-in au lieu d’opt-out), et des corrections importantes des Server Actions. La migration depuis Next.js 14 est généralement simple — 1 à 3 jours selon la taille du projet. Évitez de rester sur Next.js 13 ou moins.

Next.js ou Nuxt pour mon projet full-stack en 2026 ?

Next.js si votre équipe est en React (écosystème plus large, plus de ressources, meilleure intégration TypeScript). Nuxt si votre équipe est en Vue.js (DX supérieur dans l’écosystème Vue, conventions plus strictes qui accélèrent le développement). Pour une équipe mixte sans préférence, Next.js a l’avantage du marché et des employeurs.

App Router ou Pages Router : lequel choisir pour un nouveau projet Next.js ?

App Router (dossier app/) est le standard depuis Next.js 13 et est recommandé pour tous les nouveaux projets. Il permet les React Server Components, le streaming, les layouts imbriqués et une meilleure gestion du cache. Pages Router reste supporté mais n’évolue plus. Si vous démarrez un projet en 2026, utilisez App Router.