Next.js : le guide pour bien débuter en 2026

Next.js est le framework React le plus utilisé pour construire des sites et applications web complets. Il ajoute à React tout ce qui manque pour passer d’un projet jouet à un vrai produit : un système de routing, plusieurs modes de rendu, la récupération de données côté serveur et un déploiement quasi automatique. Ce guide vous montre, étape par étape, comment apprendre Next.js avec l’App Router, l’approche recommandée aujourd’hui.

Pourquoi Next.js plutôt que React seul ?

React est une bibliothèque : elle sait afficher des composants, mais ne dit rien sur l’organisation des pages, le référencement ou le serveur. Next.js comble ce vide. Il apporte notamment :

un routing par fichiers : chaque dossier devient une URL, sans configuration ;
plusieurs stratégies de rendu (serveur, statique, incrémental) pour optimiser vitesse et SEO ;
des composants serveur qui s’exécutent côté back-end, réduisant le JavaScript envoyé au navigateur ;
un pipeline de build et un déploiement optimisés.

Si vous découvrez encore les bases des composants, commencez par notre guide React pour débuter avant d’aller plus loin.

Créer son premier projet

Next.js s’installe en une commande. Il vous faut simplement Node.js sur votre machine.

npx create-next-app@latest mon-app
cd mon-app
npm run dev

L’assistant pose quelques questions (TypeScript, ESLint, Tailwind, App Router). Acceptez l’App Router : c’est le modèle moderne. Une fois npm run dev lancé, votre site tourne sur http://localhost:3000.

Le routing par fichiers avec l’App Router

Tout se passe dans le dossier app/. Chaque dossier correspond à un segment d’URL, et un fichier page.tsx définit la page affichée.

app/
  page.tsx          → /
  about/
    page.tsx        → /about
  blog/
    [slug]/
      page.tsx      → /blog/mon-article

Une page est simplement un composant React qui retourne du JSX :

// app/about/page.tsx
export default function AboutPage() {
  return (
    <main>
      <h1>À propos</h1>
      <p>Bienvenue sur mon site construit avec Next.js.</p>
    </main>
  );
}

Les segments dynamiques utilisent des crochets. Le dossier [slug] capture n’importe quelle valeur, disponible dans les params :

// app/blog/[slug]/page.tsx
export default function Article({ params }: { params: { slug: string } }) {
  return <h1>Article : {params.slug}</h1>;
}

Layouts partagés

Un fichier layout.tsx enveloppe toutes les pages d’un dossier. Idéal pour un en-tête, un menu ou un pied de page communs.

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="fr">
      <body>
        <header>Mon site</header>
        {children}
      </body>
    </html>
  );
}

Composants serveur et composants client

C’est la nouveauté clé de l’App Router. Par défaut, tous les composants sont des composants serveur : ils s’exécutent côté serveur, n’envoient aucun JavaScript au navigateur et peuvent accéder directement à une base de données ou une API.

Dès que vous avez besoin d’interactivité (état, événements, hooks comme useState), il faut basculer en composant client avec la directive "use client" en haut du fichier.

"use client";
import { useState } from "react";

export default function Compteur() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>Clics : {n}</button>;
}

La bonne pratique : garder le maximum de logique côté serveur et n’isoler en client que les petites parties interactives.

Les modes de rendu : SSR, SSG, ISR

Next.js peut générer vos pages de trois façons. Comprendre ces modes est essentiel pour la performance et le référencement.

SSG (Static Site Generation) : la page est générée au moment du build, une fois pour toutes. Ultra rapide, parfait pour des contenus stables (pages marketing, documentation).
SSR (Server-Side Rendering) : la page est générée à chaque requête. Utile quand les données changent en permanence ou dépendent de l’utilisateur.
ISR (Incremental Static Regeneration) : un compromis. La page est statique, mais régénérée en arrière-plan après un délai défini.

Dans l’App Router, ce comportement se règle surtout via les options de fetch. Une régénération toutes les 60 secondes s’écrit ainsi :

// app/produits/page.tsx
export default async function Produits() {
  const res = await fetch("https://api.exemple.com/produits", {
    next: { revalidate: 60 }, // ISR : régénère toutes les 60 s
  });
  const produits = await res.json();
  return (
    <ul>
      {produits.map((p: { id: number; nom: string }) => (
        <li key={p.id}>{p.nom}</li>
      ))}
    </ul>
  );
}

Le data fetching moderne

Grâce aux composants serveur, récupérer des données devient trivial : on utilise async/await directement dans le composant, sans hook ni bibliothèque externe. Le composant attend les données avant de s’afficher, et le HTML complet part vers le navigateur, ce qui est excellent pour le SEO.

Pour comprendre d’où viennent souvent ces données, notre article sur les API REST fait le tour de la question. Vous pouvez contrôler la mise en cache via les options cache: "no-store" (jamais de cache) ou revalidate (ISR).

Déployer son application

Next.js produit un build optimisé avec une seule commande :

npm run build
npm run start

Pour la mise en ligne, plusieurs hébergeurs gèrent Next.js nativement, y compris les modes serveur et statique. Un export purement statique est aussi possible pour un site sans logique serveur, déployable sur n’importe quel hébergement de fichiers. L’approche que vous choisissez dépend de vos modes de rendu : une application 100 % SSG peut vivre partout, tandis que le SSR exige un environnement Node.

Par où continuer

Vous avez maintenant la carte du territoire : routing par fichiers, composants serveur et client, modes de rendu et data fetching. La meilleure façon de progresser est de construire un petit projet complet — un blog avec pages dynamiques et une page qui interroge une API est un excellent premier exercice. Ajoutez ensuite TypeScript pour sécuriser votre code, puis un système de mise en cache adapté à vos données.