Apprendre React avec Next.js : composants, hooks et App Router pour créer des applications web

Apprendre React permet de construire des interfaces web modernes à partir de composants réutilisables, et l’associer à Next.js permet d’en faire des applications complètes : pages rendues côté serveur, routage, API et authentification dans un seul projet. C’est aujourd’hui l’un des duos les plus utilisés pour développer des applications web.

Ce guide s’adresse aux développeurs qui connaissent les bases de JavaScript et veulent passer à un outil professionnel. Vous y verrez comment créer un projet React avec Vite, écrire des composants, gérer l’état et les props, afficher des listes, puis basculer vers Next.js : App Router, layouts, Server Components, Server Actions et routes API, avec des exemples de code à reproduire.

Qu’est-ce que React et Next.js ?

React est une bibliothèque JavaScript open source, créée par Meta, qui sert à construire des interfaces utilisateur à partir de composants. Chaque composant décrit une partie de l’écran en fonction de ses données ; quand ces données changent, React met à jour uniquement ce qui doit l’être dans la page.

Next.js est un framework, développé par Vercel, qui s’appuie sur React et ajoute ce qui manque pour une application complète : un routage basé sur l’arborescence des fichiers, le rendu côté serveur, la génération de pages statiques, les routes API et l’optimisation des images et des polices.

En résumé : React fournit les briques de l’interface, Next.js fournit la structure de l’application et la partie serveur.

Pourquoi apprendre React et Next.js ?

• Réutiliser l’interface : un bouton, une carte produit ou un formulaire se codent une fois et s’utilisent partout.
• Gérer des interfaces riches sans manipuler le DOM à la main : vous décrivez le résultat voulu, React se charge des mises à jour.
• Profiter d’un écosystème très large : bibliothèques de composants, gestion de formulaires, animations, tests.
• Être bien référencé : avec Next.js, les pages sont rendues côté serveur ou générées à l’avance, ce qui les rend lisibles par les moteurs de recherche dès le premier chargement.
• Travailler en fullstack avec un seul langage : interface, logique serveur et API cohabitent dans le même projet.
• Élargir vos perspectives : les notions apprises (composants, état, rendu serveur) se retrouvent dans React Native pour le mobile et dans la plupart des frameworks front-end actuels.

Les prérequis avant d’apprendre React

React est du JavaScript. En formation, la majorité des blocages sur React viennent en réalité de lacunes en JavaScript moderne. Avant de commencer, assurez-vous de maîtriser :

• les fonctions fléchées : const doubler = (n) => n * 2; ;
• la déstructuration : const { nom, prix } = produit; et const [a, b] = tableau; ;
• les méthodes de tableau map, filter et find ;
• l’opérateur de décomposition : [...liste, nouvelElement] et { ...objet, prix: 10 } ;
• les modules : import et export ;
• les promesses et async / await pour récupérer des données.

Si l’un de ces points vous échappe, reprenez notre guide pour apprendre JavaScript avant d’aller plus loin. Des bases en CSS pour mettre en forme vos pages sont aussi nécessaires, car React ne s’occupe pas de l’apparence.

Côté outils, installez Node.js (version LTS) depuis son site officiel : il fournit la commande npm, utilisée pour créer et lancer les projets.

Apprendre React : les étapes pour créer votre première application

Étape 1 — Créer un projet avec Vite

Vite est l’outil recommandé pour démarrer une application React sans framework. Dans un terminal :

npm create vite@latest mon-app -- --template react
cd mon-app
npm install
npm run dev

Ouvrez l’adresse affichée dans le terminal (généralement http://localhost:5173). Le projet contient un dossier src avec main.jsx, qui monte l’application dans la page, et App.jsx, le composant racine. Chaque modification enregistrée s’affiche instantanément dans le navigateur.

Étape 2 — Écrire un composant et respecter les règles du JSX

Un composant React est une fonction dont le nom commence par une majuscule et qui renvoie du JSX, une syntaxe proche du HTML.

function Carte() {
  const titre = "Apprendre React";
  const estNouveau = true;

  return (
    <article className="carte">
      <h2>{titre}</h2>
      {estNouveau && <span className="badge">Nouveau</span>}
      <p>Durée : {2 + 1} heures</p>
    </article>
  );
}

export default Carte;

Les règles du JSX à retenir :

• un composant renvoie un seul élément parent ; utilisez un fragment <>...</> si vous ne voulez pas de conteneur ;
• class devient className et for devient htmlFor ;
• toutes les balises doivent être fermées, y compris <img /> et <input /> ;
• les accolades {} insèrent n’importe quelle expression JavaScript (variable, calcul, appel de fonction), mais pas une instruction comme if ;
• pour un affichage conditionnel, utilisez && ou l’opérateur ternaire condition ? a : b.

Étape 3 — Transmettre des données avec les props

Les props sont les paramètres d’un composant. Le parent les transmet comme des attributs, l’enfant les reçoit dans un objet, souvent déstructuré.

function Carte({ titre, duree, estNouveau = false }) {
  return (
    <article className="carte">
      <h2>{titre}</h2>
      {estNouveau && <span className="badge">Nouveau</span>}
      <p>Durée : {duree}</p>
    </article>
  );
}

export default function App() {
  return (
    <main>
      <Carte titre="Les bases de React" duree="1 h" estNouveau />
      <Carte titre="Next.js et l'App Router" duree="2 h" />
    </main>
  );
}

Les props sont en lecture seule : un composant ne modifie jamais les props qu’il reçoit. Pour des données qui changent, il faut un état.

Étape 4 — Gérer l’état avec useState et les événements

Le hook useState déclare une variable d’état. Il renvoie la valeur actuelle et une fonction pour la modifier. Chaque appel à cette fonction déclenche un nouveau rendu du composant.

import { useState } from "react";

export default function Compteur() {
  const [compte, setCompte] = useState(0);

  return (
    <div>
      <p>Vous avez cliqué {compte} fois.</p>
      <button onClick={() => setCompte((c) => c + 1)}>Ajouter</button>
      <button onClick={() => setCompte(0)}>Réinitialiser</button>
    </div>
  );
}

Les événements s’écrivent en camelCase (onClick, onChange, onSubmit) et reçoivent une fonction, pas un appel : onClick={ajouter} et non onClick={ajouter()}.

Ne modifiez jamais l’état directement. Pour un tableau ou un objet, créez une nouvelle version : setTaches([...taches, nouvelle]) plutôt que taches.push(nouvelle), sinon React ne détecte pas le changement.

Étape 5 — Afficher et filtrer une liste

Pour afficher une liste, on transforme un tableau de données en tableau de JSX avec map. Chaque élément doit recevoir une prop key unique et stable.

import { useState } from "react";

const cours = [
  { id: 1, titre: "JSX et composants" },
  { id: 2, titre: "useState et événements" },
  { id: 3, titre: "App Router Next.js" },
];

export default function ListeCours() {
  const [recherche, setRecherche] = useState("");

  const resultats = cours.filter((c) =>
    c.titre.toLowerCase().includes(recherche.toLowerCase())
  );

  return (
    <>
      <label htmlFor="recherche">Rechercher</label>
      <input
        id="recherche"
        value={recherche}
        onChange={(e) => setRecherche(e.target.value)}
      />
      <ul>
        {resultats.map((c) => (
          <li key={c.id}>{c.titre}</li>
        ))}
      </ul>
    </>
  );
}

Cet exemple montre aussi un champ contrôlé : sa valeur vient de l’état, et chaque frappe met l’état à jour. La liste filtrée est simplement recalculée à chaque rendu, sans état supplémentaire.

Étape 6 — Faire remonter les données vers le parent

Un enfant ne peut pas modifier l’état de son parent directement. Le parent lui transmet donc une fonction en prop, que l’enfant appelle.

import { useState } from "react";

function Formulaire({ onAjout }) {
  const [texte, setTexte] = useState("");

  function envoyer(e) {
    e.preventDefault();
    if (!texte.trim()) return;
    onAjout(texte);
    setTexte("");
  }

  return (
    <form onSubmit={envoyer}>
      <input value={texte} onChange={(e) => setTexte(e.target.value)} />
      <button type="submit">Ajouter</button>
    </form>
  );
}

export default function App() {
  const [taches, setTaches] = useState([]);
  const ajouter = (t) => setTaches([...taches, { id: crypto.randomUUID(), t }]);

  return (
    <>
      <Formulaire onAjout={ajouter} />
      <ul>{taches.map((x) => <li key={x.id}>{x.t}</li>)}</ul>
    </>
  );
}

C’est le principe du flux de données descendant : l’état vit dans le composant le plus haut qui en a besoin, les données descendent par les props, et les actions remontent par des fonctions.

Étape 7 — Découvrir les autres hooks React

Les hooks React sont des fonctions qui commencent par use et donnent accès aux fonctionnalités de React. Les plus utilisés après useState :

• useEffect synchronise un composant avec un système extérieur (abonnement, minuteur, appel réseau dans une application sans framework) ;
• useRef conserve une valeur ou une référence à un élément du DOM sans provoquer de rendu ;
• useContext partage une donnée (thème, utilisateur connecté) sans la transmettre de props en props ;
• useMemo mémorise un calcul coûteux ;
• useTransition marque une mise à jour comme non urgente pour garder l’interface réactive.

Deux règles s’appliquent à tous les hooks : on les appelle uniquement au premier niveau d’un composant (jamais dans une condition ou une boucle), et uniquement dans un composant ou un hook personnalisé.

Pour naviguer entre plusieurs pages dans une application Vite, on ajoute une bibliothèque de routage comme React Router, avec son composant Link. Pour les formulaires complexes, des bibliothèques comme Formik gèrent valeurs, validation et erreurs. Avec Next.js, le routage est intégré.

Passer à Next.js : App Router, layouts et Server Components

Créer un projet Next.js

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

L’assistant pose quelques questions (TypeScript, ESLint, Tailwind CSS, dossier src, App Router). Pour apprendre, acceptez l’App Router, le système de routage actuel de Next.js. Le site s’ouvre sur http://localhost:3000.

Routes statiques et dynamiques

Avec l’App Router, chaque dossier de app correspond à un segment d’URL, et le fichier page.js (ou page.tsx) définit la page affichée.

app/
├── layout.js          →  structure commune à tout le site
├── page.js            →  /
├── cours/
│   ├── page.js        →  /cours
│   └── [slug]/
│       └── page.js    →  /cours/react, /cours/nextjs...
└── api/
    └── cours/
        └── route.js   →  /api/cours

Un dossier entre crochets crée une route dynamique. La page reçoit le paramètre de l’URL :

// app/cours/[slug]/page.js
export default async function PageCours({ params }) {
  const { slug } = await params;
  return <h1>Cours : {slug}</h1>;
}

Pour naviguer, utilisez le composant Link de next/link plutôt qu’une balise <a> : <Link href="/cours/react">React</Link>. La navigation se fait alors sans rechargement complet de la page.

Structurer les pages avec les layouts

Un fichier layout.js enveloppe toutes les pages de son dossier et de ses sous-dossiers. Le layout racine contient obligatoirement les balises <html> et <body> :

// app/layout.js
export const metadata = {
  title: "Mon site de cours",
  description: "Des cours pour apprendre le développement web.",
};

export default function RootLayout({ children }) {
  return (
    <html lang="fr">
      <body>
        <header>Mon site</header>
        {children}
      </body>
    </html>
  );
}

L’objet metadata exporté définit le titre et la description de la page, utiles pour le référencement. Lors d’une navigation, le layout n’est pas re-rendu : seul le contenu de children change.

Server Components et Client Components

C’est la notion la plus déroutante quand on vient de React seul. Dans l’App Router, tout composant est un Server Component par défaut : il s’exécute sur le serveur, peut lire une base de données ou appeler une API directement avec await, et n’envoie aucun JavaScript au navigateur.

// app/cours/page.js : Server Component
export default async function PageListe() {
  const res = await fetch("https://api.exemple.com/cours");
  const cours = await res.json();
  return (
    <ul>
      {cours.map((c) => <li key={c.id}>{c.titre}</li>)}
    </ul>
  );
}

Dès qu’un composant a besoin d’état, d’événements ou des API du navigateur, ajoutez la directive “use client” en première ligne du fichier. Notre conseil : gardez les pages en Server Components et isolez l’interactivité dans de petits composants clients (un bouton, un filtre, un formulaire).

Server Actions et useActionState

Les Server Actions sont des fonctions asynchrones exécutées côté serveur, que l’on peut appeler directement depuis un formulaire, sans créer d’API. Le hook useActionState récupère le résultat de l’action et son état d’envoi.

// app/contact/actions.js
"use server";

export async function envoyerMessage(etatPrecedent, formData) {
  const email = formData.get("email");
  if (!email || !email.includes("@")) {
    return { erreur: "Adresse e-mail invalide." };
  }
  // enregistrement en base, envoi d'e-mail...
  return { succes: "Message envoyé." };
}

// app/contact/Formulaire.js
"use client";
import { useActionState } from "react";
import { envoyerMessage } from "./actions";

export default function Formulaire() {
  const [etat, action, enCours] = useActionState(envoyerMessage, {});
  return (
    <form action={action}>
      <input name="email" type="email" required />
      <button disabled={enCours}>{enCours ? "Envoi..." : "Envoyer"}</button>
      {etat.erreur && <p>{etat.erreur}</p>}
      {etat.succes && <p>{etat.succes}</p>}
    </form>
  );
}

Une Server Action est un point d’entrée public vers votre serveur : validez toujours les données reçues et vérifiez que l’utilisateur a le droit d’effectuer l’action.

Créer une route API

Pour exposer des données à une application externe, créez un gestionnaire de route dans un fichier route.js :

// app/api/cours/route.js
export async function GET() {
  const cours = [{ id: 1, titre: "React" }, { id: 2, titre: "Next.js" }];
  return Response.json(cours);
}

L’URL /api/cours renvoie alors ce JSON. On exporte une fonction par méthode HTTP : GET, POST, PUT, DELETE. L’authentification et la protection des pages s’appuient ensuite sur une bibliothèque dédiée et sur le fichier d’interception des requêtes de Next.js (nommé middleware ou proxy selon la version : vérifiez la documentation de la vôtre).

Les erreurs fréquentes en React et Next.js

Erreur ou symptôme	Cause	Solution
« Each child in a list should have a unique key prop »	map sans prop key	Ajouter une key stable, idéalement l’id de la donnée
L’interface ne se met pas à jour	État modifié directement (push, affectation)	Créer un nouveau tableau ou objet avec ...
La fonction s’exécute au rendu au lieu du clic	onClick={faire()} au lieu de onClick={faire}	Passer la fonction, ou une fonction fléchée
« Too many re-renders »	Mise à jour d’état appelée directement dans le rendu	Déplacer l’appel dans un gestionnaire d’événement
useState refusé dans Next.js	Hook utilisé dans un Server Component	Ajouter "use client" en tête du fichier concerné
Tout le site devient client	"use client" placé dans le layout ou une page entière	Isoler l’interactivité dans de petits composants
Erreur d’hydratation	Rendu différent entre serveur et navigateur (date, Math.random, window)	Calculer ces valeurs côté client, après le premier rendu
Hook appelé dans une condition	Violation des règles des hooks	Appeler les hooks au premier niveau du composant

React avec Vite ou Next.js : quelle approche choisir ?

Critère	React + Vite	Next.js (App Router)
Type d’application	Application monopage rendue dans le navigateur	Application hybride, rendu serveur et client
Routage	Bibliothèque à ajouter (React Router…)	Intégré, basé sur les dossiers
Référencement naturel	Plus délicat, contenu généré en JavaScript	Favorable, HTML rendu côté serveur ou généré à l’avance
Logique serveur et API	Back-end séparé nécessaire	Server Actions et routes API intégrées
Complexité d’apprentissage	Plus simple	Notions supplémentaires (serveur, cache, rendu)
Cas typiques	Outil interne, tableau de bord derrière connexion	Site public, e-commerce, blog, SaaS

Next.js propose plusieurs stratégies de rendu : génération statique au moment de la compilation (SSG), rendu à chaque requête (SSR) ou rendu côté client pour les parties interactives. Le framework choisit automatiquement selon ce que fait la page : une page qui ne dépend d’aucune donnée dynamique est générée statiquement.

Comment apprendre React et Next.js efficacement ?

Voici un parcours réaliste, pour un développeur à l’aise en JavaScript :

1. Semaine 1 : Vite, JSX, composants, props, CSS. Découpez une maquette simple en composants.
2. Semaine 2 : useState, événements, listes avec map, champs contrôlés, remontée des données. Projet : une liste de tâches filtrable.
3. Semaine 3 : autres hooks, routage, formulaires. Projet : un petit catalogue multipage.
4. Semaines 4 et 5 : Next.js, App Router, layouts, Server et Client Components, Server Actions, routes API. Projet : refaire le catalogue avec Next.js et un formulaire de contact.
5. Ensuite : authentification, base de données, déploiement.

Versionnez chaque projet dès le premier jour : apprendre Git et GitHub est indispensable pour déployer sur les plateformes modernes, qui publient automatiquement chaque modification poussée. Et si vous travaillez à partir de maquettes, savoir lire un fichier Figma pour le design d’interface facilite le découpage en composants.

Pour un apprentissage guidé, la formation vidéo pour apprendre React et Next.js d’EspritAcadémique suit exactement cette progression en 3 h 45, de la création d’un projet Vite jusqu’à l’authentification dans Next.js. Au programme :

• les fondations de React : projet Vite, règles du JSX, composants, styles CSS et styles dynamiques ;
• l’état avec useState, les props, les listes avec map, la remontée de données et le filtrage en temps réel ;
• les hooks, le routage avec React Router, les formulaires avec Formik et les transitions ;
• l’App Router de Next.js : routes statiques et dynamiques, layouts, navigation et styles ;
• les Server et Client Components, les stratégies de rendu, les Server Actions et useActionState ;
• les routes API, l’authentification et la gestion de session.

En résumé

Pour apprendre React, consolidez d’abord votre JavaScript moderne, puis maîtrisez les composants, le JSX, les props, useState et l’affichage de listes. Passez ensuite à Next.js : l’App Router organise vos pages par dossiers, les Server Components rendent le contenu côté serveur, et les Server Actions remplacent une bonne partie des API. Avancez projet par projet, en isolant l’interactivité dans de petits composants clients.