Qu'est-ce que Next.js ? Le framework React expliqué

Qu'est-ce que Next.js ?

Next.js est un framework React pour créer des applications web full-stack. Vous écrivez l'interface avec des composants React, et Next.js ajoute routage, rendu côté serveur, récupération de données, cache, gestion des images et des polices et build, sans que vous assembliez ces briques. Vercel le développe et vous pouvez l'héberger sur un serveur Node.js ou dans un conteneur Docker.

Versions et routeurs

Au moment de la rédaction (octobre 2026), la dernière version est Next.js 16.4, publiée le 6 octobre 2026. Avec Next.js 16, Turbopack est devenu le bundler par défaut, proxy.ts a remplacé middleware.ts et Node.js 20.9 ou plus récent est requis. La documentation actuelle décrit deux routeurs : l'App Router, qui prend en charge les nouvelles fonctions de React comme les Server Components, et le Pages Router d'origine, toujours pris en charge. Les nouveaux projets démarrent avec l'App Router. Consultez la documentation officielle de votre version, car les valeurs par défaut ont changé d'une version à l'autre.

Comment Next.js génère les pages

Next.js vous laisse choisir le mode de rendu de chaque route, au lieu d'imposer une seule stratégie à toute l'application :

• Rendu statique (prérendu) : la page est construite à l'avance et servie comme un fichier, ce qui coûte le moins cher et convient bien derrière un CDN. Voir la génération de sites statiques.
• Rendu dynamique : la page est rendue sur le serveur à chaque requête, adapté aux pages personnalisées. Voir le rendu côté serveur.
• Régénération statique incrémentale (ISR) : une page statique est régénérée en arrière-plan après un délai ou à la demande. La première requête après l'intervalle reçoit encore la page en cache pendant que la nouvelle se construit.
• Streaming : le serveur envoie la page par morceaux au fur et à mesure qu'ils sont prêts, si bien que des données lentes ne bloquent pas toute la page.
• Cache Components : un modèle plus récent où vous marquez des parties d'une page avec 'use cache' et le reste est rendu au moment de la requête. Next.js 16.4 le recommande pour toute application et l'active pour les nouvelles applications créées avec create-next-app ; l'équipe annonce qu'il deviendra le modèle par défaut dans Next.js 17.

Server Components et Client Components

Dans l'App Router, les layouts et les pages sont des Server Components par défaut. Ils s'exécutent sur le serveur, peuvent lire des bases de données et utiliser des secrets, et n'envoient aucun code de composant au navigateur. Ajoutez la directive 'use client' à un fichier quand il a besoin d'état, de gestionnaires d'événements ou d'API du navigateur. Le navigateur reçoit alors du HTML pour une première vue rapide et du JavaScript qui hydrate les parties interactives. Placez 'use client' sur de petits composants interactifs plutôt que sur des arbres de page entiers, pour garder un bundle JavaScript léger.

Un petit exemple

Cette page de l'App Router est prérendue pour chaque article de blog et régénérée au plus une fois par heure :

// app/blog/[slug]/page.tsx
export const revalidate = 3600 // regenerate at most once an hour

export async function generateStaticParams() {
  const posts = await fetch('https://example.com/api/posts').then((r) => r.json())
  return posts.map((p) => ({ slug: p.slug }))
}

export default async function Page({ params }) {
  const { slug } = await params
  // ...fetch the post and render it on the server
}

Erreurs courantes avec Next.js

• Tout marquer 'use client'. Cela embarque tout le sous-arbre dans le bundle du navigateur et annule l'intérêt des Server Components.
• Supposer les règles de cache d'une version plus ancienne. Les valeurs par défaut ont évolué d'une version à l'autre et les Cache Components rendent le cache optionnel. Lisez le guide de votre version et testez avec un build de production.
• Attendre l'ISR partout. L'ISR demande le runtime Node.js et n'est pas pris en charge dans un export statique. Avec plusieurs instances de serveur, le cache par défaut est propre à chaque instance : il faut un gestionnaire de cache partagé.
• Négliger les mises à jour. L'équipe Next.js publie régulièrement des versions de sécurité. Épinglez une version corrigée et suivez les notes de version.
• Utiliser une simple balise d'image. Le composant next/image redimensionne et met les images en cache pour vous, un img brut non.

Next.js, performance et tests de charge

Le mode de rendu d'une route décide où se concentre le coût. Une page statique coûte peu par requête, alors qu'une page rendue dynamiquement consomme du CPU serveur à chaque visite : son temps jusqu'au premier octet et sa capacité changent sous trafic. C'est exactement ce que montre un test de charge : augmentez les utilisateurs virtuels sur vos routes dynamiques et vos routes d'API, puis observez le temps de réponse et les erreurs. Comparez une route en cache à une route sans cache pour voir ce que le cache apporte.

Côté utilisateur, la surveillance de la vitesse des pages suit les Core Web Vitals, comme le Largest Contentful Paint, après chaque déploiement, et le vérificateur gratuit de Core Web Vitals donne une mesure rapide pour une URL. Notre guide des budgets de performance pour applications web (en anglais) montre comment transformer ces chiffres en limites. Si vous travaillez avec Vue, Nuxt en est l'équivalent, et React est la bibliothèque sur laquelle repose Next.js.

Questions fréquentes sur Next.js

Next.js est-il un framework ou une bibliothèque ?

Next.js est un framework construit sur React. React est la bibliothèque pour créer l'interface, et Next.js y ajoute routage, rendu, cache et outils.

Qui développe Next.js ?

Vercel développe Next.js et le code est open source sur GitHub. Vous pouvez le déployer chez Vercel ou sur votre propre infrastructure.

Quelle différence entre l'App Router et le Pages Router ?

L'App Router est le routeur le plus récent. Il prend en charge les React Server Components, les layouts imbriqués et le streaming. Le Pages Router est l'original et reste pris en charge. Pendant une migration, les deux peuvent coexister dans un même projet.

Next.js est-il bon pour le SEO ?

Il peut l'être, car les pages peuvent être rendues en HTML sur le serveur ou au build, de sorte que les robots reçoivent le contenu sans exécuter votre JavaScript. De bons résultats dépendent tout de même de pages rapides, de métadonnées propres et d'un contenu utile.

Faut-il Vercel pour héberger Next.js ?

Non. Next.js tourne sur un serveur Node.js ou dans un conteneur Docker, et des plateformes peuvent le prendre en charge via des adaptateurs. Des fonctions comme l'ISR demandent alors la configuration décrite dans la documentation d'auto-hébergement, par exemple un cache partagé dès que vous exécutez plus d'une instance.