React s'arrête à l'affichage. Reste à décider comment les pages sont routées, où le HTML est fabriqué, comment les données sont chargées et ce qui part dans le navigateur.
Next.js répond à ces quatre questions d'un coup, en imposant des conventions plutôt qu'en proposant des options.
Définition
Next.js est un framework bâti sur React. L'arborescence des dossiers définit les URL, chaque page est rendue sur le serveur avant d'être envoyée au navigateur, et le même projet héberge les routes qui servent les données.
// app/factures/[id]/page.jsx
export default async function Page({ params }) {
const { id } = await params;
const facture = await lireFacture(id);
return (
<main>
<h1>Facture {facture.id}</h1>
<p>{facture.montant} euros</p>
</main>
);
}Le dossier fixe l'adresse, les crochets déclarent un segment variable, et le composant peut être async. Cette dernière propriété est la vraie rupture : la donnée est lue pendant le rendu, sur le serveur, avant que la moindre ligne ne parte au navigateur.
Serveur par défaut, client sur demande
Dans l'App Router, un composant est un composant serveur sauf mention contraire. Il n'est jamais envoyé au navigateur, ce qui lui permet de lire une base ou un secret sans risque, mais lui interdit tout état et tout écouteur d'événement.
"use client";
import { useState } from "react";
export default function Filtre() {
const [texte, setTexte] = useState("");
return <input value={texte} onChange={(event) => setTexte(event.target.value)} />;
}La directive "use client" marque une frontière, pas un fichier isolé : tout ce qu'un composant client importe part avec lui dans le navigateur. C'est la première chose à vérifier quand un paquet de code grossit sans raison.
Ce que le framework apporte en plus
| Fonction | Ce qu'elle remplace |
|---|---|
| Routage par dossiers | Une bibliothèque de routage à configurer |
| Rendu serveur | Un serveur à écrire soi-même |
| Route handlers | Une API séparée pour les appels internes |
| Composant Image | Le redimensionnement et les formats modernes |
| Mise en cache | Une couche de cache assemblée à la main |
Ces cinq lignes expliquent l'adoption du framework : chacune correspond à un chantier que la plupart des équipes menaient séparément, souvent deux fois.
Questions fréquentes
App Router ou Pages Router ?
Les deux existent encore et cohabitent dans un même projet, ce qui rend la migration progressive. Les nouveautés arrivent désormais sur l'App Router, et les composants serveur en sont la raison d'être. Un nouveau projet n'a plus de raison de partir sur l'ancien routeur.
Faut-il un serveur pour déployer ?
Cela dépend des pages. Une page dont le contenu ne change pas peut être exportée en fichiers statiques et servie par n'importe quel hébergement. Dès qu'une page lit une donnée à chaque requête, il faut un environnement capable d'exécuter du Node.js.
Next.js est-il justifié pour un petit site ?
Pour trois pages fixes, c'est beaucoup de machinerie. La bascule se fait dès qu'il y a des données à charger, des pages à générer depuis un contenu, ou un besoin de référencement sérieux, puisque le HTML complet part alors dès la première réponse. En dessous, un site statique ordinaire reste plus simple à tenir.