frontend / nextjs

Introduction & App Router

Leçon 11 exercice

Explication

Un peu d'histoire

Next.js est créé par l'équipe de Vercel (à l'époque nommée Zeit), sous l'impulsion de Guillermo Rauch, et sort en octobre 2016. À cette époque, faire du rendu côté serveur (SSR) avec React demandait une configuration manuelle complexe (webpack, Babel, routing fait main...). Next.js est né du besoin de rendre tout ça simple : un fichier dans un dossier devient automatiquement une page, avec le rendu serveur configuré par défaut.

Pourquoi apprendre Next.js aujourd'hui

Next.js est devenu le framework de référence pour construire des applications React prêtes pour la production : routage automatique, rendu serveur et statique, optimisations de performance intégrées (images, polices, JavaScript). Il est utilisé par des entreprises comme TikTok, Twitch, Notion ou Hulu. Comme la majorité des offres d'emploi "développeur React" mentionnent aujourd'hui Next.js, c'est une compétence presque incontournable pour qui veut travailler sur des applications web modernes.

Ce que vous allez apprendre

Comprendre pourquoi Next.js existe et ce qu'il ajoute par-dessus React seul
Créer un projet avec create-next-app et lire l'arborescence du dossier app/
Distinguer un Server Component (par défaut) d'un Client Component ("use client")
Comprendre le routing par convention de fichiers, sans configuration de routes manuelle
Utiliser <Link> plutôt que <a> pour profiter du préchargement automatique des pages
Repérer les fichiers obligatoires (layout.tsx) et leur rôle dans l'App Router

Dans quel contexte ?

Un développeur vient de rejoindre une équipe qui maintient un site e-commerce. On lui demande d'ajouter une page /promotions affichant une liste d'offres, sans casser le header ni le footer déjà en place sur tout le site. Avant même d'écrire une ligne de logique métier, il doit comprendre où créer son fichier (app/promotions/page.tsx), pourquoi il n'a pas besoin de déclarer cette route ailleurs, et pourquoi ce composant, par défaut, ne contiendra aucun JavaScript envoyé au navigateur tant qu'aucune interaction n'est nécessaire.

L'idée derrière Next.js, étape par étape

D'abord, imagine React tout seul. Si tu construis un site avec React "pur", rien n'est fait à ta place : tu dois écrire toi-même le routage, décider où s'exécute chaque bout de code, optimiser les images, gérer le SEO. React s'occupe seulement de l'affichage.

Next.js ajoute une couche par-dessus. Il prend ces décisions à ta place et te donne une structure claire : ce n'est plus juste une bibliothèque d'interface, c'est un framework complet pour construire une vraie application.

Voyons d'abord comment il gère le routage. L'App Router (le dossier app/) repose sur une règle simple : la structure de tes dossiers EST ton routage. Pas besoin d'écrire une liste de routes dans un fichier de configuration à part.

Un exemple concret pour bien comprendre. Si tu crées un dossier about/ contenant un fichier page.tsx, l'URL /about existe automatiquement, sans rien configurer d'autre. On appelle ça le "routing par convention".

Maintenant, une deuxième question : où s'exécute le code de tes composants ? Historiquement, React envoyait tout son JavaScript au navigateur, même pour une page toute simple comme un article de blog sans aucune interaction.

Next.js inverse cette logique par défaut. Un composant s'exécute UNIQUEMENT sur le serveur et n'envoie que du HTML déjà prêt au navigateur, pas de JavaScript superflu à télécharger.

Il reste un cas où on a vraiment besoin de JavaScript côté client : l'interactivité. Un bouton qui réagit à un clic, un champ qui se met à jour en direct... pour ces parties-là seulement, on ajoute la mention "use client".

Fichier spécial	Rôle	Obligatoire ?
`app/layout.tsx`	Layout racine, enveloppe `<html>`/`<body>`	Oui
`app/page.tsx`	Contenu de la route `/`	Non (mais nécessaire pour avoir une page)
`app/globals.css`	Styles globaux importés dans le layout	Non
`app/about/page.tsx`	Crée automatiquement la route `/about`	Non

Prérequis

Cette leçon suppose une base de React (JSX, composants, props). Aucune connaissance préalable de Next.js n'est nécessaire : c'est le tout premier contact avec l'App Router.

Une fois ces bases posées, voici les pièges à éviter :

Oublier que le layout racine (app/layout.tsx) est obligatoire : sans lui, Next.js ne sait pas où placer <html> et <body>.
Utiliser <a href="..."> au lieu de <Link> pour les liens internes : on perd le préchargement automatique et on recharge toute la page.
Croire que "Server Component" veut dire "composant lent" : c'est l'inverse, c'est ce qui allège le navigateur du client.

Bonne pratique

Commence toujours un nouveau composant SANS "use client". Ajoute cette directive seulement quand le compilateur ou le navigateur te signale un besoin réel d'interactivité (un useState, un onClick...). Ça garde le maximum de code côté serveur, donc moins de JavaScript téléchargé par le visiteur.

Et pour la suite ? Cette leçon pose les fondations. Toutes celles qui viennent après (layouts, routes dynamiques, data fetching) s'appuient sur cette organisation par dossiers que tu viens de découvrir.

Commandes & code

Introduction & App Router

Next.js est un framework React full-stack. L'App Router (dossier app/) utilise des fichiers spéciaux pour définir routes, layouts et UI.

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

app/
├── layout.tsx     # Layout racine, obligatoire
├── page.tsx       # Route "/"
├── globals.css
├── about/
│   └── page.tsx   # Route "/about"
└── blog/
    └── page.tsx   # Route "/blog"

// app/layout.tsx — layout racine, enveloppe TOUTES les pages
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Mon App",
  description: "Générée avec Next.js",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="fr">
      <body>{children}</body>
    </html>
  );
}

// app/page.tsx — Server Component par défaut (pas de "use client")
export default function HomePage() {
  return (
    <main>
      <h1>Bienvenue</h1>
      <p>Ce composant s'exécute côté serveur, jamais envoyé au client.</p>
    </main>
  );
}

// app/about/page.tsx — chaque dossier = un segment d'URL
export default function AboutPage() {
  return <h1>À propos</h1>;
}

// Navigation client-side avec next/link — pas de rechargement complet
import Link from "next/link";

export default function Nav() {
  return (
    <nav>
      <Link href="/">Accueil</Link>
      <Link href="/about">À propos</Link>
      <Link href="/blog" prefetch={false}>Blog</Link>
    </nav>
  );
}

Résumé

app/ = routing par convention de fichiers, pas de config de routes manuelle.
layout.tsx racine est obligatoire et contient <html>/<body>.
Server Components par défaut : moins de JS envoyé au navigateur.
<Link> remplace <a> pour la navigation interne (prefetch automatique).

Exercices pratiques

1 disponible

Mission : diagnostiquer une page qui refuse de s'afficher

Objectif : Corriger une arborescence app/ incomplète et choisir correctement entre Server et Client Component pour une nouvelle route.

Contexte

Un stagiaire a livré un dossier app/promotions/ contenant uniquement un fichier page.tsx, mais le projet ne possède aucun app/layout.tsx à la racine : le build échoue. Il a aussi ajouté "use client" en haut de son page.tsx alors que ce composant ne fait qu'afficher une liste de promotions reçue par fetch, sans aucun useState ni onClick.

Résoudre l’exercice →