Next.js — le framework React full-stack

Next.js est un framework React full-stack maintenu par Vercel.

Il ajoute autour de React tout ce qui manque : rendu côté serveur, routing, récupération des données et back-end léger — dans un seul projet.

C'est aujourd'hui le framework React de référence en termes d'adoption et d'écosystème.

Exemple — React classique (rendu client)

// Le navigateur va chercher les données APRÈS le premier rendu
function Profil({ id }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`/api/users/${id}`) // aller-retour réseau
      .then((r) => r.json())
      .then(setUser);
  }, [id]);

  if (!user) return <p>Chargement…</p>; // écran d'attente
  return <h1>{user.name}</h1>;
}

Page envoyée vide → JS → requête → rendu. L'utilisateur attend, et l'API doit être exposée.

Exemple — Next.js (rendu serveur)

// Le composant s'exécute SUR le serveur, au moment de la requête
export default async function Profil({ params }) {
  const user = await db.users.find(params.id); // accès direct aux données

  return <h1>{user.name}</h1>; // HTML déjà prêt, zéro requête côté client
}

Les données sont récupérées au rendu : le serveur renvoie un HTML complet, sans aller-retour ni API à exposer.