Next.js : créer une application Web moderne

Un projet React « from scratch » (avec Vite) laisse plusieurs questions ouvertes que Next.js résout par convention : routing, rendu, optimisation.

• Les limites d'un projet React seul 10 min
• Ce que Next.js ajoute par-dessus React 12 min
• SSR, SSG, CSR : les modes de rendu en un coup d'œil 12 min

Note : dans Next.js, l'équivalent de Vite est son propre outillage intégré (`create-next-app`), qui gère bundling et serveur de développement sans configuration séparée.

• Créer un projet avec create-next-app 10 min
• Structure d'un projet Next.js (App Router) 12 min
• Serveur de développement et rechargement 8 min

Le JSX de Next.js est identique à celui de React : mêmes règles, mêmes expressions, avec en plus quelques composants spéciaux fournis par le framework.

• JSX dans une page Next.js 10 min
• Le composant `<Link>` 10 min
• Rendu conditionnel et listes dans Next.js 10 min

Next.js introduit une distinction essentielle absente d'un projet React classique : Server Components et Client Components.

• Server Components par défaut 14 min
• Client Components avec 'use client' 14 min
• Composer Server et Client Components 12 min

Les props fonctionnent exactement comme en React ; la seule subtilité à connaître concerne les props spéciales des pages (params, searchParams).

• Props classiques entre components 8 min
• La prop params sur une route dynamique 12 min
• La prop searchParams 10 min

L'état local se gère avec useState exactement comme en React, mais uniquement à l'intérieur d'un Client Component.

• useState dans un Client Component 10 min
• État partagé entre plusieurs Client Components 12 min

Les gestionnaires d'événements (onClick, onChange...) nécessitent également un Client Component, pour la même raison que useState.

• onClick et interactivité 10 min
• Formulaires et Server Actions (aperçu) 14 min

Un formulaire Next.js peut être traité classiquement côté client, ou via une Server Action pour éviter d'écrire une route API séparée.

• Formulaire contrôlé classique 10 min
• Server Action sur un formulaire 14 min

useEffect reste utile pour la logique côté client (ex. écouter le scroll), mais Next.js encourage à récupérer les données autrement, en amont, côté serveur.

• Quand utiliser encore useEffect 10 min
• Pourquoi éviter useEffect pour charger des données 12 min

Dans un Server Component, on peut appeler une API — ou une base de données — directement dans la fonction du component, sans passer par fetch + useEffect.

• Récupérer des données directement dans un Server Component 16 min
• Créer sa propre route API avec Route Handlers 14 min
• Gérer les erreurs et le chargement 12 min

Le routing par fichiers de l'App Router remplace React Router : la structure de dossiers EST la structure de navigation de l'application.

• Routes statiques et imbriquées 10 min
• Routes dynamiques avec crochets 12 min
• Layouts partagés entre plusieurs routes 12 min

Optimisation des images, des polices et des métadonnées : les derniers réglages avant le déploiement d'une application Next.js.

• Le composant `<Image>` optimisé 12 min
• Métadonnées et SEO 10 min
• Déployer une application Next.js 12 min