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

> Apprendre React pas à pas : JSX, composants, props et hooks, puis Next.js avec l'App Router, les Server Components et les Server Actions, exemples à l'appui.

- URL : https://guides-numeriques.fr/developpement/react-nextjs/
- Thématique : Développement web & mobile
- Mis à jour : 2026-09-26
- Formation associée : [Cours pour apprendre React et Next.js : Le Guide Complet Modern Web](https://espritacademique.com/formations/cours-pour-apprendre-react-et-next-js-le-guide-complet-modern-web/)

## L'essentiel

- Pour apprendre React, il faut d'abord maîtriser le JavaScript moderne : fonctions fléchées, déstructuration, méthode map, modules et promesses.
- Une interface React se construit avec des composants, des fonctions qui reçoivent des props et renvoient du JSX.
- Le hook useState stocke l'état d'un composant : chaque modification de cet état déclenche un nouveau rendu de l'interface.
- Next.js est un framework basé sur React qui ajoute le routage par fichiers (App Router), le rendu serveur et la création de routes API.
- Dans l'App Router de Next.js, les composants sont des Server Components par défaut ; la directive "use client" est nécessaire pour utiliser l'état et les événements.

**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](https://guides-numeriques.fr/developpement/apprendre-javascript/) avant d'aller plus loin. Des bases en [CSS pour mettre en forme vos pages](https://guides-numeriques.fr/developpement/apprendre-css/) 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


**Schéma — Première application React : les étapes clés**

1. **Créer le projet** : npm create vite@latest, puis npm run dev
2. **Écrire un composant** : Fonction qui renvoie du JSX, className
3. **Transmettre des props** : Données passées du parent à l'enfant
4. **Gérer l'état** : useState et événements comme onClick
5. **Afficher une liste** : filter, map et attribut key unique
6. **Remonter les données** : Fonction passée en prop, appelée par l'enfant


### Étape 1 — Créer un projet avec Vite

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

```bash
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.

```jsx
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é.

```jsx
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.

```jsx
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.

```jsx
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.

```jsx
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é.

> **Formation recommandée** : [Cours pour apprendre React et Next.js : Le Guide Complet Modern Web](https://espritacademique.com/formations/cours-pour-apprendre-react-et-next-js-le-guide-complet-modern-web/) — 3h45 de vidéo, 59 €.

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

### Créer un projet Next.js

```bash
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.

```text
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 :

```jsx
// 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>` :

```jsx
// 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.

```jsx
// 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.

```jsx
// 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é." };
}
```

```jsx
// 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` :

```javascript
// 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.


**Schéma — React avec Vite ou Next.js : quelle approche choisir ?**

| React + Vite | Next.js (App Router) |
|---|---|
| Application monopage rendue dans le navigateur | Rendu hybride, serveur et client |
| Routage à ajouter (React Router) | Routage intégré, basé sur les dossiers |
| Back-end séparé nécessaire | Server Actions et routes API intégrées |
| Outil interne, tableau de bord | Site public, e-commerce, blog, SaaS |


## 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](https://guides-numeriques.fr/developpement/git-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](https://guides-numeriques.fr/design/figma-ui-design/) facilite le découpage en composants.

Pour un apprentissage guidé, [la formation vidéo pour apprendre React et Next.js](https://espritacademique.com/formations/cours-pour-apprendre-react-et-next-js-le-guide-complet-modern-web/) 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.

## Sources et documentation officielle

- [Démarrage rapide (documentation React)](https://fr.react.dev/learn)
- [Penser en React (documentation React)](https://fr.react.dev/learn/thinking-in-react)
- [Next.js Docs (Next.js)](https://nextjs.org/docs)
- [Server and Client Components (documentation Next.js)](https://nextjs.org/docs/app/getting-started/server-and-client-components)

## Questions fréquentes

### Combien de temps faut-il pour apprendre React ?

Avec de bonnes bases en JavaScript, comptez deux à quatre semaines de pratique régulière pour maîtriser les fondamentaux de React : composants, JSX, props, useState, listes et formulaires. Ajoutez quelques semaines pour être à l'aise avec Next.js, l'App Router et les Server Components. Sans bases solides en JavaScript, commencez par celles-ci : c'est ce qui fait gagner le plus de temps.

### Faut-il apprendre React avant Next.js ?

Oui, c'est l'ordre recommandé. Next.js est construit sur React : ses pages, ses layouts et ses composants sont des composants React. Sans comprendre le JSX, les props, l'état et le cycle de rendu, les notions propres à Next.js comme les Server Components ou les Server Actions deviennent très difficiles à saisir. Quelques semaines sur React seul suffisent avant de basculer.

### React est-il un framework ou une bibliothèque ?

React se présente officiellement comme une bibliothèque JavaScript dédiée à la construction d'interfaces utilisateur. Il ne gère ni le routage, ni la récupération de données, ni le rendu serveur par lui-même. C'est pourquoi on l'associe à des outils complémentaires, ou à un framework complet comme Next.js, qui fournit toutes ces briques de façon intégrée.

### Faut-il connaître TypeScript pour apprendre React ?

Non, vous pouvez apprendre React en JavaScript pur, et c'est même conseillé pour ne pas cumuler deux difficultés. En revanche, la plupart des projets professionnels React et Next.js utilisent TypeScript. Une fois les bases de React acquises, apprendre à typer vos props et vos états est une étape logique, que create-next-app propose d'ailleurs d'activer dès la création du projet.

### Quelle est la différence entre Vite et Next.js ?

Vite est un outil de développement et de compilation : il crée et sert rapidement une application React qui s'exécute entièrement dans le navigateur. Next.js est un framework complet : il ajoute le routage par fichiers, le rendu côté serveur, la génération de pages statiques et des routes API. Vite convient à une application interne, Next.js à un site public qui doit être bien référencé.

### Où héberger une application Next.js ?

Une application Next.js peut être hébergée sur toute plateforme qui exécute Node.js : Vercel, l'éditeur de Next.js, propose un déploiement direct depuis un dépôt Git, mais d'autres hébergeurs cloud et un serveur Node classique conviennent aussi. Si votre site n'utilise aucune fonctionnalité serveur, Next.js peut également générer un export statique hébergeable n'importe où.