Next.js

Présentation

Next.js est un framework React open source développé par Vercel pour créer des applications Web allant d’un site statique à une application full-stack.

Il complète React avec une architecture de routing, des fonctions serveur, plusieurs stratégies de rendu, la gestion des métadonnées, l’optimisation des images et des polices ainsi qu’un environnement de développement intégré.

L’architecture moderne repose principalement sur App Router, un routeur basé sur le système de fichiers qui exploite notamment React Server Components, Suspense et Server Functions.

Next.js permet de combiner dans une même application contenu statique, rendu dynamique, streaming et composants interactifs côté navigateur.

Le framework n’impose pas Vercel pour le déploiement : une application peut notamment fonctionner sur un serveur Node.js, dans Docker ou être adaptée à d’autres plateformes.

Au 3 octobre 2026, Next.js 16.3.8 constitue la version stable Active LTS. Next.js 15 reste en Maintenance LTS.

Fonctionnalités

App Router et routing par fichiers

L’App Router organise les routes à partir des dossiers et fichiers présents dans le répertoire app.

Des fichiers comme page, layout, loading, error ou not-found définissent directement différentes parties d’une route.

Les layouts peuvent être imbriqués et conservés lors de la navigation, ce qui facilite la création d’interfaces partageant navigation, sidebar ou structure générale.

Next.js prend également en charge routes dynamiques, groupes de routes, routes parallèles et interception de routes.

Server Components et Client Components

Les pages et layouts de l’App Router sont des Server Components par défaut.

Ils peuvent accéder à des données côté serveur, utiliser des secrets non exposés au navigateur et limiter la quantité de JavaScript envoyée au client.

Lorsqu’un composant a besoin d’état, d’événements ou d’API du navigateur, la directive "use client" permet de créer une frontière Client Component.

Les deux types de composants peuvent être combinés dans la même interface afin de réserver JavaScript client aux portions réellement interactives.

Data fetching et streaming

Un Server Component peut récupérer ses données directement depuis une API, une base de données ou une autre source asynchrone.

Next.js peut ensuite envoyer progressivement certaines parties de l’interface grâce au streaming et à Suspense.

Le fichier loading permet notamment d’afficher rapidement un état temporaire pendant que le contenu dynamique est préparé.

Cette architecture évite de devoir créer systématiquement une API intermédiaire uniquement pour transférer des données entre le serveur et un composant React.

Server Functions et Server Actions

Les Server Functions sont des fonctions asynchrones exécutées côté serveur mais pouvant être déclenchées depuis l’interface.

Lorsqu’elles sont utilisées pour une mutation ou une action de formulaire, elles sont généralement appelées Server Actions.

Elles peuvent par exemple créer un enregistrement, modifier des données ou traiter un formulaire sans construire manuellement un endpoint distinct pour chaque opération.

Les contrôles d’authentification et d’autorisation restent toutefois indispensables, car ces fonctions constituent de véritables points d’entrée serveur.

Cache Components

Next.js 16 introduit Cache Components, une approche où le contenu dynamique s’exécute par défaut à la requête et où la mise en cache devient explicite.

La directive "use cache" peut servir à mettre en cache une fonction, un composant ou une page.

Des fonctions comme cacheLife et cacheTag permettent de contrôler durée et invalidation.

Cette architecture peut combiner une coque pré-rendue rapide avec des parties dynamiques grâce au principe de Partial Pre-Rendering.

Cache Components doit actuellement être activé dans la configuration du projet.

Turbopack

Turbopack est le bundler par défaut de Next.js 16 pour le développement et les builds.

Il remplace progressivement webpack dans les nouveaux workflows Next.js et repose sur une architecture pensée pour les compilations incrémentales.

Le serveur de développement bénéficie notamment de Fast Refresh et ne reconstruit que les parties nécessaires lorsque le code change.

webpack reste disponible pour les projets nécessitant encore une configuration ou des plugins spécifiques.

React Compiler

Next.js fournit une intégration avec React Compiler.

Le compilateur peut analyser automatiquement composants et Hooks afin d’éviter certaines optimisations manuelles autour de la mémorisation.

Son activation reste optionnelle dans Next.js.

Cette intégration permet de profiter du compilateur React sans construire soi-même toute la chaîne de transformation.

Images, polices et métadonnées

Le composant next/image ajoute notamment redimensionnement, lazy loading et formats modernes adaptés au périphérique.

next/font optimise les polices et peut auto-héberger les Google Fonts afin d’éviter les requêtes du navigateur vers les serveurs Google.

L’API Metadata permet de gérer titres, descriptions, favicons et images Open Graph statiques ou dynamiques.

Ces fonctions regroupent dans le framework plusieurs optimisations qui demanderaient autrement des outils séparés.

Route Handlers et backend

Les Route Handlers permettent de créer des endpoints HTTP directement dans l’App Router.

Ils peuvent répondre aux méthodes courantes comme GET, POST, PUT, PATCH ou DELETE.

Next.js peut ainsi servir de Backend for Frontend pour une application React : appels vers une base de données, webhooks, authentification ou API spécifiques peuvent être placés à côté de l’interface.

Pour une architecture backend très importante ou indépendante de plusieurs clients, un service dédié peut néanmoins rester préférable.

Proxy

Next.js 16 a renommé l’ancienne convention middleware en proxy.

Le fichier proxy.ts peut intercepter une requête avant le rendu afin d’effectuer redirections, réécritures, traitement d’en-têtes ou certaines vérifications.

Le changement de nom vise à mieux représenter son rôle de frontière réseau et à éviter sa confusion avec les middlewares classiques de frameworks serveur.

Next.js recommande de réserver Proxy aux situations où des API plus spécifiques ne suffisent pas.

App Router et Pages Router

Le Pages Router historique reste disponible et maintenu.

Il utilise le dossier pages et les anciennes conventions Next.js pour le routing et les stratégies de récupération de données.

L’App Router constitue cependant l’architecture recommandée pour les nouveaux projets et donne accès aux fonctions modernes autour des Server Components et Server Functions.

Une base existante n’a donc pas besoin d’être réécrite immédiatement uniquement parce qu’elle utilise Pages Router.

Déploiement

Next.js peut fonctionner sur un serveur Node.js ou dans un conteneur Docker avec l’ensemble de ses fonctionnalités.

L’export statique permet de produire des fichiers HTML, CSS et JavaScript déployables sur un hébergement statique, mais certaines fonctions serveur deviennent alors indisponibles.

Le framework peut aussi utiliser des adapters pour différentes plateformes.

Vercel propose une intégration particulièrement directe avec Next.js, mais n’est pas obligatoire pour utiliser le framework.

Cas d’usage

Construire une application React full-stack

Next.js peut réunir pages React, accès aux données, mutations serveur et endpoints HTTP dans le même projet.

Cette approche convient aux applications SaaS, espaces clients, dashboards ou outils métier.

Créer un site éditorial

Le rendu serveur, la génération statique, les métadonnées et l’optimisation des images conviennent aux blogs, médias, documentations ou sites de contenu.

Chaque route peut adopter une stratégie différente selon la fréquence de mise à jour des données.

Développer un site e-commerce

Les Server Components peuvent récupérer catalogue et informations produit côté serveur tandis que les Client Components gèrent panier, filtres et interactions.

Les Server Actions peuvent traiter certaines mutations sans multiplier les endpoints manuels.

Construire une interface hybride

Une page peut contenir une majorité de contenu produit côté serveur et seulement quelques composants interactifs envoyés au navigateur.

Cette séparation permet de limiter le JavaScript client tout en conservant une expérience riche.

Créer un Backend for Frontend

Les Route Handlers et Server Functions peuvent regrouper la logique nécessaire spécifiquement à l’interface Web.

Ils peuvent masquer des secrets, agréger plusieurs services ou transformer les réponses avant de les transmettre au client.

Conclusion

Next.js transforme React en un environnement full-stack structuré autour du Web moderne.

App Router associe routing par fichiers, Server Components et rendu progressif, tandis que Server Functions et Route Handlers permettent d’ajouter une véritable logique serveur au même projet.

Turbopack, l’optimisation des images et des polices, les métadonnées et les outils de cache complètent cet environnement avec des fonctions prêtes à l’emploi.

Le framework reste néanmoins plus complexe qu’une application React entièrement client : il faut comprendre les frontières serveur/client, les stratégies de cache et les conséquences du mode de déploiement choisi.

Pour construire des applications React complètes avec rendu serveur, routing, accès aux données et optimisations intégrées, Next.js constitue aujourd’hui l’un des frameworks majeurs de l’écosystème React.

Points d’attention

• Next.js 16.3.8 est la version stable Active LTS au 3 octobre 2026.

• Next.js 15.5.27 reste en Maintenance LTS. Les branches 14 et antérieures ne font plus partie des versions officiellement supportées.

• Les builds canary sont des préversions. Ils permettent de tester les prochaines fonctions mais ne sont pas recommandés pour le trafic de production.

• Next.js est gratuit et open source sous licence MIT. Utiliser le framework ne nécessite pas d’héberger son application chez Vercel.

• App Router est recommandé pour les nouveaux projets. Pages Router reste toutefois maintenu et peut continuer à être utilisé dans les applications existantes.

• Les Server Components sont exécutés côté serveur par défaut dans App Router. Il faut utiliser "use client" lorsque le composant a réellement besoin d’état, d’événements ou d’API du navigateur.

• Les Server Functions doivent être protégées comme des endpoints publics. Authentification, autorisation et validation des données restent nécessaires.

• Cache Components est une fonction opt-in. Son modèle de cache diffère des comportements implicites de certaines versions précédentes de Next.js.

• middleware.ts est déprécié dans Next.js 16 au profit de proxy.ts. Les anciens projets peuvent nécessiter une migration.

• Turbopack est désormais le bundler par défaut, mais certains projets dépendant de comportements spécifiques à webpack peuvent encore nécessiter ce dernier.

• Le mode de déploiement détermine les fonctions disponibles. Un export statique ne peut pas fournir toutes les capacités d’un serveur Node.js.

• Next.js nécessite actuellement Node.js 20.9 ou supérieur pour le développement. Les exigences peuvent évoluer avec les futures versions majeures.

• Les mises à jour de sécurité doivent être appliquées rapidement. Vercel recommande de maintenir les applications de production sur la dernière version Active LTS ou Maintenance LTS.