Neurau Tech

Posted on Nov 6 Originally published at neurautech.com

Next.js c'est quoi ? Version 16, rendu, cache et premier projet

#nextjs #react #javascript #frameworkweb

L'essentiel en une minute

Next.js est un framework web construit sur React et maintenu par Vercel. React fournit les composants ; Next.js ajoute le routage par fichiers, le rendu sur le serveur, le cache, des points d'API et un outil de build. Le 6 novembre 2026, la dernière version stable est la 16.4.5, publiée le 3 novembre selon le registre npm.

Ce guide repose sur des sources officielles consultées le 6 novembre 2026. Nous avons aussi créé, compilé et lancé un petit projet, et nous détaillons ce qui a été exécuté.

Points clés

Next.js 16.4.5 est la version stable ; elle demande Node.js 20.9 ou plus.

Depuis la 16.4, les nouveaux projets activent les Cache Components : le cache devient explicite, avec "use cache".

Un fetch n'est pas mis en cache par défaut. Dans notre projet, un fetch sans cache ni <Suspense> a fait échouer le build.

Next.js tourne aussi hors de Vercel, dont l'offre gratuite est réservée à un usage non commercial.

Une mise à jour de sécurité sort environ chaque mois depuis juillet 2026.

Next.js, c'est quoi exactement ?

Next.js est un framework React pour construire des applications web complètes, interface et serveur dans le même projet. La documentation de React le décrit comme « un framework React qui exploite pleinement l'architecture de React pour permettre des applications React full-stack » (notre traduction, react.dev).

React est une bibliothèque d'interface ; avec React et Vite, vous choisissez vous-même routeur, chargement des données et rendu serveur. Next.js fournit ces briques avec des conventions. Pour React lui-même, voyez notre comparatif React vs Vue.

Next.js ajoute à React :

un routage par fichiers : le fichier app/blog/page.tsx devient l'URL /blog ;
le rendu sur le serveur, au build ou à la demande, pour envoyer du HTML déjà rempli ;
du code serveur : gestionnaires de route et Server Actions ;
un cache des données et des pages ;
des optimisations pour les images, les polices et le découpage du JavaScript.

Pour les bases, voyez notre cours HTML CSS débutant, puis nos guides pour apprendre JavaScript et apprendre TypeScript, le langage par défaut des projets Next.js.

Version actuelle et prérequis

La version stable est Next.js 16.4.5, un correctif de sécurité de la branche 16.4 sortie le 6 octobre 2026 (blog Next.js, note de version).

Élément	Valeur au 6 novembre 2026
Version stable	16.4.5 (3 novembre 2026), dite « Active LTS »
Branche maintenue en parallèle	15.5.29, dite « Maintenance LTS »
Node.js minimum	20.9
TypeScript minimum	5.1.0
Navigateurs	Chrome et Edge 111+, Firefox 111+, Safari 16.4+

Sources : page d'installation, mise à jour le 2 octobre 2026, et mise à jour de sécurité du 3 novembre.

La branche 16 date du 21 octobre 2025. Ses notes de version expliquent pourquoi beaucoup de tutoriels sont périmés : Node.js 18 n'est plus pris en charge, Turbopack devient le bundler par défaut, middleware.ts est renommé proxy.ts et next build ne lance plus le linter.

Composants serveur et composants client

Dans l'App Router, un composant est un composant serveur tant que vous ne dites pas le contraire. Selon la documentation, les layouts et les pages sont par défaut des Server Components.

Un composant serveur peut lire une base de données ou utiliser une clé secrète, et son code n'est pas envoyé au navigateur ; il ne peut pas utiliser useState, onClick ni window.

Un composant client commence par "use client". Il est rendu en HTML, puis « hydraté » dans le navigateur pour devenir interactif. La directive marque une frontière : tout ce que ce fichier importe et rend directement passe aussi côté client, sans directive propre. Un composant serveur transmis en children reste, lui, rendu sur le serveur. La règle pratique : tout en composant serveur, et "use client" seulement sur les petites parties interactives.

Les modes de rendu : SSR, SSG, ISR et streaming

Next.js choisit le mode de rendu route par route, et next build affiche celui qu'il a retenu.

Mode	Principe	Comment l'obtenir en 16.4
SSG (statique)	HTML produit au build	Pas de donnée dynamique, ou données en `"use cache"`
PPR (prérendu partiel)	Coquille statique servie tout de suite, parties dynamiques diffusées à la requête	Comportement par défaut avec les Cache Components : `<Suspense>` autour des données dynamiques
SSR (rendu serveur complet)	Toute la page produite à chaque requête	Avec les Cache Components, seulement sur option explicite (route bloquante)
ISR (régénération)	Page statique régénérée après un délai ou à la demande	`cacheLife`, `revalidateTag`, `revalidatePath`
Streaming	Les parties lentes arrivent après le reste	`<Suspense>` ou `loading.tsx`
CSR (rendu client)	Données chargées par le navigateur	Composant client, SWR, React Query

Avec les Cache Components, la documentation appelle ce modèle Partial Prerendering : le build produit une coquille statique, et chaque partie dynamique placée dans un <Suspense> arrive ensuite (documentation sur le cache). Les robots qui ne lisent que le HTML sont traités à part : Next.js attend les métadonnées pour les placer dans le <head>, et l'option htmlLimitedBots fixe la liste de ces robots (guide du streaming).

App Router ou Pages Router ?

Pour un nouveau projet Next.js, choisissez l'App Router. La documentation du Pages Router le dit elle-même : il reste pris en charge, mais l'équipe recommande de migrer vers l'App Router pour profiter des dernières fonctions de React.

Critère	App Router (`app/`)	Pages Router (`pages/`)
Statut	Recommandé, défaut de `create-next-app`	Pris en charge
Composants serveur	Oui, par défaut	Non
Points d'API	Gestionnaires de route (`route.ts`)	API Routes (`pages/api`)
Données	`fetch` dans les composants, `"use cache"`	`getServerSideProps`, `getStaticProps`

Une base de code existante sur le Pages Router peut y rester ; la documentation prévoit une migration progressive de pages vers app.

Données, cache et code serveur

Le comportement par défaut du cache a changé deux fois, d'où des tutoriels contradictoires. Dans Next.js 14, un fetch était mis en cache par défaut. Next.js 15 a inversé ce choix : fetch, gestionnaires de route GET et navigations côté client ne sont plus en cache par défaut (blog Next.js 15).

Next.js 16 a ajouté les Cache Components, un cache « entièrement opt-in » (notre traduction, blog Next.js 16). La documentation sur le cache, mise à jour le 6 octobre 2026, fixe les règles :

un fetch n'est pas mis en cache ; deux appels identiques dans un même rendu sont seulement mémoïsés ;
"use cache" met en cache une fonction ou un composant, de préférence avec cacheLife ;
une donnée non mise en cache doit être placée dans un <Suspense>.

Gestionnaires de route. Un fichier route.ts répond aux requêtes HTTP avec les objets standard Request et Response ; c'est l'équivalent des API Routes (documentation). Notre article API, c'est quoi ? explique les requêtes et le JSON.

Server Actions. Une Server Action est une fonction serveur appelée depuis un formulaire ou un bouton, en POST. Elle est joignable par une requête directe, prévient la documentation : vérifiez les droits dans chacune.

Premier projet Next.js pas à pas

Voici le projet que nous avons créé le 6 novembre 2026 sous Windows 11, avec Node.js 22.15.0 et npm 10.9.2 : un composant serveur qui lit une API publique, un composant client avec un compteur, et un gestionnaire de route.

1. Créer le projet

npx create-next-app@16.4.5 mon-app --ts --app --eslint --tailwind --use-npm --yes
cd mon-app

L'outil a installé next 16.4.5, react et react-dom 19.3.0, TypeScript 5.9.3 et Tailwind CSS 4.3.4. Le next.config.ts généré contient déjà cacheComponents: true. En fin d'installation, npm audit signalait 8 vulnérabilités de gravité modérée dans les dépendances.

2. Un composant serveur qui lit une API

// app/components/DerniereVersion.tsx
import { cacheLife } from "next/cache";

type PaquetNpm = { name: string; version: string };

// Composant serveur : ce code ne part jamais dans le navigateur.
export default async function DerniereVersion() {
  "use cache";
  cacheLife("hours");

  const res = await fetch("https://registry.npmjs.org/next/latest");
  if (!res.ok) throw new Error(`Registre npm : HTTP ${res.status}`);
  const paquet: PaquetNpm = await res.json();

  return (
    <p>
      Dernière version de {paquet.name} sur npm : <strong>{paquet.version}</strong>
    </p>
  );
}

3. Un composant client avec un état

// app/components/Compteur.tsx
"use client";

import { useState } from "react";

// Composant client : il a un état et réagit aux clics.
export default function Compteur() {
  const [clics, setClics] = useState(0);

  return (
    <button
      onClick={() => setClics((c) => c + 1)}
      className="rounded bg-black px-4 py-2 text-white"
    >
      Cliqué {clics} fois
    </button>
  );
}

4. Un gestionnaire de route et la page

// app/api/bonjour/route.ts
// Gestionnaire de route : GET /api/bonjour?nom=Ada
export async function GET(request: Request) {
  const nom = new URL(request.url).searchParams.get("nom") ?? "inconnu";
  return Response.json({ message: `Bonjour ${nom}`, date: new Date().toISOString() });
}

// app/page.tsx
import Compteur from "./components/Compteur";
import DerniereVersion from "./components/DerniereVersion";

export default function Home() {
  return (
    <main className="mx-auto flex max-w-xl flex-col gap-6 p-10">
      <h1 className="text-3xl font-semibold">Mon premier projet Next.js</h1>
      <DerniereVersion />
      <Compteur />
      <p>
        Essayez aussi <a className="underline" href="/api/bonjour?nom=Ada">/api/bonjour?nom=Ada</a>.
      </p>
    </main>
  );
}

5. Compiler et lancer

npm run build a réussi. Voici sa sortie brute, colonnes comprises, à une exception près : nous avons retiré les deux lignes d'un avertissement propre à notre machine, qui signalait un package-lock.json égaré dans le dossier personnel, hors du projet.

▲ Next.js 16.4.5 (Turbopack)

✓ Running next.config.ts took 424ms
- Cache Components enabled
- Partial Prefetching enabled

  Creating an optimized production build ...
✓ Compiled successfully in 11.5s
  Running TypeScript ...
  Finished TypeScript in 9.2s ...
  Collecting page data using 6 workers ...
  Generating static pages using 6 workers (0/5) ...
  Generating static pages using 6 workers (1/5) 
  Generating static pages using 6 workers (2/5) 
  Generating static pages using 6 workers (3/5) 
✓ Generating static pages using 6 workers (5/5) in 3.3s
  Finalizing page optimization ...

Route (app)       Revalidate  Expire
┌ ○ /                     1h      1d
├ ○ /_not-found
└ ƒ /api/bonjour


○  (Static)   prerendered as static content
ƒ  (Dynamic)  server-rendered on demand

La page d'accueil est statique et revalidée toutes les heures, à cause de cacheLife("hours"). Le gestionnaire de route est dynamique, car il lit la requête. Après npm start, /api/bonjour?nom=Ada a renvoyé {"message":"Bonjour Ada","date":"2026-11-06T15:09:49.906Z"}, et la page d'accueil portait l'en-tête Cache-Control: s-maxage=3600, stale-while-revalidate=82800.

Dans Chromium 120 piloté par Playwright 1.40, trois clics ont fait passer le compteur de 0 à 3 : l'hydratation fonctionne.

6. L'erreur que vous allez rencontrer

Lors d'un premier essai, avant d'ajouter la vérification res.ok, nous avions retiré "use cache" et cacheLife. Le build avait échoué : Route "/": Next.js encountered uncached or runtime data during prerendering. Next.js propose trois corrections : entourer la lecture d'un <Suspense>, la mettre en cache avec "use cache", ou accepter une route bloquante avec export const instant = false.

Turbopack et déploiement

Turbopack est le bundler par défaut depuis Next.js 16, stable en développement comme en production (blog Next.js 16). Webpack reste disponible avec l'option --webpack.

Vercel n'est pas obligatoire. La documentation de déploiement liste quatre options :

Option	Fonctions prises en charge
Serveur Node.js (`next build` puis `next start`)	Toutes
Conteneur Docker	Toutes
Export statique (`output: "export"`)	Limitées
Adaptateurs (Vercel et Bun vérifiés ; Cloudflare, Netlify, AWS Amplify par leurs propres intégrations)	Variables

Pour Docker, output: "standalone" crée un dossier .next/standalone avec un server.js minimal et les seules dépendances nécessaires, sans public ni .next/static, à copier à part (documentation). Sur notre projet, ce dossier pesait 32 Mo et node server.js a servi la page et l'API. Voyez notre guide Docker pour débutants et notre tutoriel Nginx reverse proxy avec Docker Compose pour le HTTPS.

L'export statique se sert depuis n'importe quel serveur web, mais perd notamment les Server Actions, l'ISR, les cookies, le Proxy et l'optimisation d'images par défaut (guide des exports statiques).

Combien coûte l'hébergement ?

Next.js est gratuit et open source. L'offre Hobby de Vercel est gratuite mais limitée à un usage personnel non commercial, selon sa page mise à jour le 14 septembre 2026. Elle inclut notamment 100 Go de transfert de données et 1 million d'invocations de fonctions par mois ; l'offre Pro coûte 20 $ par développeur et par mois.

Les règles d'usage équitable qualifient de commercial tout déploiement qui sert le gain financier d'une personne impliquée, publicité et promotion de services comprises. Notre guide du portfolio de développeur en tire la conséquence : un portfolio qui vend vos services relève de l'offre payante. Les autres options sont dans notre comparatif de l'hébergement cloud pour développeurs.

Sécurité : les failles à connaître

Deux failles critiques ont marqué 2025, et les correctifs, dont plusieurs critiques, sont devenus mensuels en 2026. La conclusion : tenez Next.js à jour, avec npx next upgrade comme le recommande la page d'installation.

CVE-2025-29927. Publiée le 21 mars 2025 et notée CVSS 9,1, cette faille permettait de contourner les contrôles d'autorisation placés dans le middleware avec l'en-tête x-middleware-subrequest (avis GitHub). Corrigée en 12.3.5, 13.5.9, 14.2.25 et 15.2.3. Elle touchait les applications auto-hébergées avec next start ou output: "standalone" ; selon le post-mortem de Vercel, les sites hébergés chez Vercel, Netlify ou Cloudflare Workers et les exports statiques n'étaient pas concernés. La documentation du Proxy, nouveau nom du middleware, déconseille d'en faire une solution complète d'autorisation.

CVE-2025-55182, dite React2Shell. Le 3 décembre 2025, une faille des React Server Components notée CVSS 10,0 a été rendue publique : elle permettait une exécution de code à distance sans authentification (fiche CVE). Next.js l'avait suivie sous CVE-2025-66478, identifiant depuis rejeté comme doublon de CVE-2025-55182 (fiche CVE). Les applications App Router en 15.x et 16.x étaient touchées ; les versions corrigées sont 15.0.5, 15.1.9, 15.2.6, 15.3.6, 15.4.8, 15.5.7 et 16.0.7, et l'équipe recommandait de changer les secrets des applications restées exposées (avis Next.js).

Un rythme mensuel. Le 13 juillet 2026, Next.js a annoncé des mises à jour de sécurité planifiées, environ une par mois (blog Next.js). Ont suivi les mises à jour du 20 juillet, du 25 août, du 22 septembre (mise à jour urgente 16.3.6 contre une exécution de code critique dans ImageResponse) et du 30 septembre. Celle du 14 octobre (16.4.1) corrigeait deux failles critiques d'exécution de code, liées à "use cache" et à l'optimisation d'images SVG (blog Next.js). Celle du 3 novembre corrige une faille élevée et six moyennes (blog Next.js).

En pratique : vérifiez les droits dans chaque Server Action et chaque gestionnaire de route, et automatisez les mises à jour et les tests, par exemple avec GitHub Actions.

Popularité : ce que disent les chiffres

L'enquête Stack Overflow 2026 a recueilli 30 903 réponses valides du 23 juin au 5 août 2026 (méthodologie). Parmi les 10 281 répondants à la question sur les frameworks web, 20,6 % ont beaucoup travaillé avec Next.js dans l'année, contre 41,5 % pour React, 17,2 % pour Vue.js, 16,0 % pour Angular, 7,8 % pour Svelte, 6,2 % pour Astro, 4,4 % pour Nuxt.js et 1,7 % pour Remix (données 2026).

Ces pourcentages décrivent les répondants, pas l'ensemble des développeurs. Autre angle : du 27 octobre au 2 novembre 2026, le paquet next a été téléchargé 89 744 743 fois sur npm, react-router 73 416 892 fois et nuxt 3 263 303 fois. La même semaine de 2025, next en comptait 15 115 622 : une multiplication par six que l'API ne permet pas d'expliquer. Ces chiffres incluent les installations automatiques en intégration continue, et ceux de react-router comptent aussi les applications qui l'utilisent comme simple routeur côté client.

Next.js, React avec Vite, React Router ou Nuxt ?

Le bon choix dépend de ce que l'application doit faire côté serveur. La documentation de React recommande de partir d'un framework, comme Next.js ou React Router (react.dev).

Votre besoin	Choix raisonnable	Pourquoi
Site public à référencer, avec API et formulaires	Next.js	Rendu serveur, cache et code serveur dans un seul projet
Tableau de bord derrière une connexion, sans SEO	React avec Vite	Moins de concepts, aucun serveur à exploiter
Application React full-stack centrée sur le routage	React Router 8.5.1	Héritier de Remix 2 ; demande Node.js 22.22 ou plus
Équipe qui préfère Vue	Nuxt 4.6.4	L'équivalent de Next.js pour Vue
Site de contenu : blog, documentation, marketing	Astro 7.4.7	Conçu pour les sites centrés sur le contenu (documentation d'Astro)

Remix a fusionné dans React Router v7, annonçaient ses créateurs en mai 2024 (blog Remix). Le nom désigne aujourd'hui Remix 3, qui n'est plus construit sur React : son annonce de mai 2025 parle de « pas même React » comme dépendance et d'un départ sur un fork de Preact (notre traduction, blog Remix), et le paquet remix 3.2.0 ne dépend ni de React ni de Preact sur npm. Versions lues sur le registre npm le 6 novembre 2026.

Ce que nous n'avons pas pu vérifier

Les 8 vulnérabilités modérées signalées par npm audit : non analysées.
Les performances. Une compilation de 11,5 secondes sur une seule machine n'est pas une mesure comparative ; aucun test de charge n'a été fait.
Le déploiement réel. Nous avons lancé next start et le serveur standalone en local, sans construire d'image Docker ni déployer sur Vercel.
Les scores CVSS des failles de 2026, que les billets du blog ne donnent pas tous.
State of JS : non consulté pour cet article.

Questions fréquentes

Next.js, c'est du front-end ou du back-end ?

Les deux : l'interface React, et du code serveur avec les composants serveur, les gestionnaires de route et les Server Actions. Pour de longs calculs, un back-end séparé reste souvent plus adapté.

Faut-il apprendre React avant Next.js ?

Oui. Next.js repose sur les composants, les props, l'état et les hooks de React, et ses messages d'erreur supposent qu'on les connaît.

Quelle est la dernière version de Next.js ?

Le 6 novembre 2026, c'est la 16.4.5, publiée le 3 novembre selon le registre npm. Vérifiez avec npm view next version. La branche 15.5 reçoit encore des correctifs de sécurité.

Peut-on utiliser Next.js sans Vercel ?

Oui. Selon la documentation, un serveur Node.js ou un conteneur Docker prend en charge toutes les fonctions. L'export statique et certains adaptateurs en perdent une partie.

À propos de l'auteur

Abdelilah Ourti est ingénieur IA et architecte logiciel. Il conçoit et déploie des applications web et des systèmes d'IA, et publie sur NeurauTech des guides et des comparatifs destinés aux développeurs francophones. Ses autres articles sont réunis sur sa page auteur.

Méthode. Synthèse de sources publiques consultées le 6 novembre 2026 : documentation et blog de Next.js, avis de sécurité GitHub, documentation de React et de Vercel, registre et statistiques de npm, enquête Stack Overflow 2026. La seule manipulation est le premier projet décrit plus haut : création, build, lancement avec next start et en mode standalone, appel de l'API et clics dans un navigateur automatisé. Les citations en anglais sont traduites par nos soins. Aucun lien n'est affilié et aucune relation commerciale ne lie l'auteur à Vercel ni aux projets cités.

Une erreur ou une version périmée ? Écrivez à contact@neurautech.com : l'article sera corrigé et la date de mise à jour modifiée.

Dernière mise à jour : 6 novembre 2026.

Image d'en-tête : Pankaj Patel (Unsplash License). Capture du projet : NeurauTech.

DEV Community