Next.js pour les développeurs React Le guide complet pour des applications web professionnelles

Alexis MAISON

Bientôt disponible !
Suivez-nous pour être informé dès la sortie

Les points forts du livre :

Un apprentissage progressif de Next.js, depuis les fondations du framework et son architecture (Server et Client Components, App Router, stratégies de rendu) jusqu’à la création d’applications complètes,
Une mise en pratique complète du développement web moderne : routage avancé, gestion d’état, API Routes, intégration de bases de données, authentification et Server Actions,
Des bonnes pratiques professionnelles pour la production : optimisation des performances, SEO, accessibilité, tests, déploiement, automatisation et scalabilité, illustrées par des exemples concrets et des exercices pratiques

Aperçu de la version papier

Niveau Confirmé à Expert
Nombre de pages 464 pages
Parution avril 2026

Présentation

Ce livre propose une progression claire et pédagogique pour découvrir puis maîtriser Next.js, le framework moderne basé sur React utilisé pour développer des applications web rapides, fiables et prêtes pour la production. Il s’adresse aux étudiants, aux développeurs débutants ou intermédiaires, ainsi qu’aux professionnels en reconversion souhaitant comprendre comment concevoir, structurer et déployer des applications complètes avec Next.js.

Après une introduction aux fondations du framework, à son architecture (Server et Client Components, App Router, cycle de rendu) et aux grandes évolutions du développement web, l’ouvrage accompagne le lecteur dans la construction d’une application étape par étape : structure du projet, routage avancé, pages et layouts, gestion d’état, stratégies de rendu et de récupération de données, Server Actions, formulaires, API Routes, intégration d’une base de données et authentification.

Les chapitres suivants abordent des aspects essentiels du développement professionnel : optimisation front-end, performance, SEO, accessibilité, bonnes pratiques UI, animation, tests, débogage, revue de code, déploiement, automatisation et scalabilité dans un contexte de production. Chaque chapitre est illustré par du code clair, des exemples concrets, des conseils pratiques et des exercices pour aider le lecteur à consolider ses acquis.

Ce livre se distingue par son approche résolument pratique : il ne se contente pas d’expliquer Next.js, il montre comment l’utiliser pour créer des applications modernes réellement exploitables en production.

Caractéristiques

Livre (broché) - 17 x 21 cm
ISBN : 978-2-409-05377-1
EAN : 9782409053771
Ref. ENI : EINEXT

Caractéristiques

HTML
ISBN : 978-2-409-05378-8
EAN : 9782409053788
Ref. ENI : LNEINEXT

Téléchargements

Des fichiers complémentaires (50 Ko)

Table des matières

Évolution du Web et rôle de Next.js

1. De l’ère statique à l’ère des applications hybrides
1. 1.1 Les débuts : le Web statique
2. 1.2 L’avènement du rendu dynamique
3. 1.3 Le triomphe du JavaScript client
4. 1.4 L’émergence des frameworks hybrides
5. 1.5 Vers une architecture universelle : du document à l’application
2. L’évolution des frameworks JavaScript
1. 2.1 Des bibliothèques aux frameworks complets
2. 2.2 L’émergence des meta-frameworks : Next.js, Nuxt.js, SvelteKit
3. 2.3 Les promesses initiales de Next.js
4. 2.4 Next.js aujourd’hui : une plateforme complète et modulaire
5. 2.5 En résumé : pourquoi Next.js s’impose
3. React et Next.js : comprendre la complémentarité
1. 3.1 React : une bibliothèque d’interface minimaliste
2. 3.2 Next.js : une surcouche productive et structurante
3. 3.3 Comparaison concrète : React seul vs Next.js
4. 3.4 Pourquoi utiliser Next.js aujourd’hui ?
5. 3.5 En synthèse : React pour la flexibilité, Next.js pour la productivité
4. Next.js dans la pratique : une réponse à tous les niveaux de complexité
1. 4.1 Un framework adaptable à chaque cas d’usage
2. 4.2 Cas d’usage 1 : le blog statique (SSG)
3. 4.3 Cas d’usage 2 : le site dynamique à contenu fréquent (ISR)
4. 4.4 Cas d’usage 3 : application authentifiée (SSR + client components)
5. 4.5 Cas d’usage 4 : boutique e-commerce (SSR + API + optimisations)
6. 4.6 Cas d’usage 5 : produit SaaS (full-stack, API, base de données)
7. 4.7 En résumé : une courbe de montée en puissance maîtrisée
5. À propos du livre
1. 5.1 Pourquoi ce livre ?
2. 5.2 À qui s’adresse cet ouvrage ?
3. 5.3 Objectifs pédagogiques
4. 5.4 Structure et logique de progression
5. 5.5 Méthodologie choisie : pratique et fil conducteur
6. 5.6 Derniers conseils au lecteur

Prise en main de Next.js

1. Préparer l’environnement de développement
2. Créer un nouveau projet Next.js
1. 2.1 Initialisation avec create-next-app
2. 2.2 Lancer le serveur de développement
3. 2.3 Scripts essentiels
4. 2.4 Configuration de base (next.config.js)
5. 2.5 En résumé : un démarrage guidé et moderne
3. Explorer la structure du projet
1. 3.1 Arborescence générée
2. 3.2 Convention plutôt que configuration
3. 3.3 Vue d’ensemble des dossiers principaux
  1. 3.3.1 app/ : le cœur de l'application
  2. 3.3.2 public/ : fichiers statiques
  3. 3.3.3 styles/ : gestion du CSS
  4. 3.3.4 components/ : composants d’interface
  5. 3.3.5 lib/ ou utils/ : logique applicative
  6. 3.3.6 types/ : typage centralisé
  7. 3.3.7 Autres fichiers clés
4. Comprendre l’App Router
1. 4.1 Principe général du routage par fichiers
2. 4.2 Fichiers spéciaux à connaître
3. 4.3 Une architecture déclarative
4. 4.4 Exemple : trois pages, un layout
5. 4.5 En résumé : un modèle clair et prédictible
5. L'architecture server et client components
1. 5.1 Une évolution majeure du modèle React
2. 5.2 Le paradigme server-first
3. 5.3 Une architecture hybride et granulaire
4. 5.4 Une base pour le streaming et les Server Actions
  1. 5.4.1 Composant Server (app/page.tsx)
  2. 5.4.2 Composant client (components/Compteur.tsx)
  3. 5.4.3 Points à retenir
5. 5.5 Pourquoi cette séparation est essentielle
6. 5.6 En résumé : un modèle moderne et performant
7. 5.7 components/ : les briques de l’interface
8. 5.8 lib/ ou utils/ : la logique métier et les helpers
9. 5.9 types/ : les contrats de données
6. Créer et organiser ses pages
1. 6.1 Créer une nouvelle page
2. 6.2 Ajouter des composants réutilisables
3. 6.3 Exemple : page de contact avec formulaire
4. 6.4 Ajouter un layout global
5. 6.5 En résumé : vers une application modulaire

Routage et navigation avancée

1. Comprendre l'évolution du routage dans Next.js
1. 1.1 Pourquoi deux systèmes de routage ?
2. 1.2 Le Pages Router : héritage et limites
3. 1.3 L'App Router : l'architecture moderne
4. 1.4 Tableau comparatif synthétique
5. 1.5 En résumé : la transition vers le modèle App Router
2. Routage dynamique avec l’App Router
1. 2.1 Introduction : routes dynamiques et segments
2. 2.2 Créer une route dynamique : [param]
3. 2.3 Accéder aux paramètres dynamiques
4. 2.4 Cas d’usage typiques
5. 2.5 Routes catch-all et optionnelles : [...param] et [[...param]]
6. 2.6 Extraire les paramètres dans une route catch-all
7. 2.7 Limitations et bonnes pratiques
8. 2.8 Cas d’usage concrets
  1. 2.8.1 Blog avec route dynamique
  2. 2.8.2 Documentation à structure profonde
  3. 2.8.3 En résumé : vers un routage souple et cohérent
3. Navigation côté client
1. 3.1 Rappel : structure du routage dans l’App Router
2. 3.2 Le composant : navigation déclarative
  1. 3.2.1 Le mécanisme de préchargement (prefetching)
  2. 3.2.2 Utilisation dans une application
  3. 3.2.3 Bonnes pratiques et pièges à éviter
  4. 3.2.4 Options avancées (replace, scroll, shallow)
  5. 3.2.5 Exemples concrets
3. 3.3 Le hook useRouter : navigation programmatique
  1. 3.3.1 Introduction et contexte
  2. 3.3.2 Avantages de l’utilisation de useRouter
  3. 3.3.3 Inconvénients et points de vigilance
  4. 3.3.4 Dépendance à l’architecture Next.js
  5. 3.3.5 Risques de comportements inattendus
  6. 3.3.6 Complexification de la logique métier
  7. 3.3.7 Exemple d’utilisation
  8. 3.3.8 Usages avancés et bonnes pratiques
4. 3.4 La fonction redirect() : redirections côté serveur
  1. 3.4.1 Introduction à redirect
  2. 3.4.2 Avantages de l'utilisation de redirect
  3. 3.4.3 Inconvénients et points de vigilance
  4. 3.4.4 Exemple d’utilisation
  5. 3.4.5 Usages avancés et bonnes pratiques
5. 3.5 Synthèse : comparer les trois outils de navigation
4. Cas pratique - Combiner les méthodes de navigation
1. 4.1 Étude de cas : une application de blog sécurisée
  1. 4.1.1 Navigation de base avec
  2. 4.1.2 Pagination et filtrage dynamique avec useRouter
  3. 4.1.3 Sécurisation avec redirect côté serveur
  4. 4.1.4 Explications et complémentarité
2. 4.2 Conclusion : complémentarité des outils
5. Structurer l’interface avec les layouts
1. 5.1 Pourquoi structurer l’interface avec des layouts ?
2. 5.2 Le rôle de layout.tsx
  1. 5.2.1 Fichier clé du segment
  2. 5.2.2 Exemple de structure
  3. 5.2.3 Signature de layout.tsx
3. 5.3 Layouts imbriqués et persistants
  1. 5.3.1 Layouts imbriqués
  2. 5.3.2 Layouts persistants entre pages
4. 5.4 Exemple d’interface à layouts multiples
  1. 5.4.1 Layout global (app/layout.tsx)
  2. 5.4.2 Layout de section (app/dashboard/layout.tsx)
  3. 5.4.3 Résultat
5. 5.5 Layouts et accessibilité (UX)
6. 5.6 Bonnes pratiques de conception
6. Middleware et interception de requêtes
1. 6.1 Pourquoi intercepter une requête ?
2. 6.2 Créer un middleware
  1. 6.2.1 Emplacement
  2. 6.2.2 Signature de base
3. 6.3 Fonctions principales d’un middleware
  1. 6.3.1 Redirection conditionnelle
  2. 6.3.2 Réécriture d’URL
  3. 6.3.3 Ajout d’en-têtes personnalisés
  4. 6.3.4 Blocage d'accès
4. 6.4 Configuration du middleware et portée
  1. 6.4.1 Fichier middleware.ts
  2. 6.4.2 Limitation du scope via matcher
5. 6.5 Middleware vs redirect() : comparaison des contextes
6. 6.6 Bonnes pratiques d’utilisation
7. 6.7 Cas concret : redirection d’un utilisateur non connecté
  1. 6.7.1 Middleware d’auth simplifié
  2. 6.7.2 Résultat
8. 6.8 En résumé : le middleware comme filtre global

Gestion d'état en React

1. Comprendre la notion d’état
1. 1.1 Pourquoi parler d’« état » ?
2. 1.2 L’état local avec useState()
3. 1.3 L’état dans un arbre de composants
4. 1.4 Les limites de l’état local
2. Les solutions natives de React
1. 2.1 Les outils intégrés : useState, useReducer, useContext
2. 2.2 useContext + useState : partage simple d’un état
3. 2.3 useReducer + Context : structure plus rigoureuse
4. 2.4 Quand ces solutions atteignent leurs limites
3. Vers un état global et partageable
1. 3.1 Pourquoi un état global devient nécessaire
2. 3.2 Le besoin d’un store centralisé, léger et typé
3. 3.3 En résumé : l’émergence du besoin d’un gestionnaire d’état moderne
4. Zustand : la solution simple et moderne
1. 4.1 Présentation générale de Zustand
2. 4.2 Exemple minimal et principes de base
3. 4.3 Pourquoi Zustand est parfait pour Next.js
4. 4.4 Quand choisir Zustand ?
5. 4.5 En résumé
5. Structurer ses stores avec Zustand
1. 5.1 Pourquoi structurer ses états en modules ?
2. 5.2 Créer un store Zustand simple
  1. 5.2.1 Définir le store
  2. 5.2.2 Utiliser le store dans un composant
3. 5.3 Séparer les états : approche modulaire
  1. 5.3.1 Arborescence recommandée
  2. 5.3.2 Exemple : store auth.ts
  3. 5.3.3 Exemple : store ui.ts
4. 5.4 Bonnes pratiques d’architecture
  1. 5.4.1 Utiliser un typage strict avec TypeScript
  2. 5.4.2 Garder les stores « minces » et découplés
  3. 5.4.3 Centraliser les exports (optionnel)
6. Intégrer Zustand dans Next.js
1. 6.1 Points d’attention principaux
  1. 6.1.1 Zustand : usage interdit en Server Components
  2. 6.1.2 Stores partagés entre pages
  3. 6.1.3 Cas de l’hydratation (SSR)
2. 6.2 Distinction entre server et client components
3. 6.3 Implications pratiques : où utiliser Zustand ?
4. 6.4 Exemple : hydrater un store avec une donnée serveur
  1. 6.4.1 Composant serveur (page.tsx)
  2. 6.4.2 Composant client (Counter.tsx)
5. 6.5 Alternative : Zustand persisté
6. 6.6 Pourquoi Zustand n’est pas Server Friendly (et pourquoi c’est cohérent)
7. 6.7 En résumé
7. Comparer Redux, Context et Zustand
1. 7.1 Objectif de la comparaison
2. 7.2 Rappels sur Redux et Context
  1. 7.2.1 Redux
  2. 7.2.2 React Context
3. 7.3 Quand utiliser Redux ?
4. 7.4 Quand utiliser React Context ?
5. 7.5 Pourquoi Zustand est-il plus adapté dans 90 % des cas Next.js ?
6. 7.6 Exemple comparatif de syntaxe
  1. 7.6.1 Redux (avec Redux Toolkit)
  2. 7.6.2 React Context + useState
  3. 7.6.3 Zustand
7. 7.7 Tableau de synthèse comparatif

Gestion du rendu et des données

1. Comprendre les stratégies de rendu
1. 1.1 Contexte : le triptyque SSG/SSR/ISR
2. 1.2 Static Site Generation (SSG)
  1. 1.2.1 Avantages
  2. 1.2.2 Limites
  3. 1.2.3 Cas d’usage typiques
3. 1.3 Server-Side Rendering (SSR)
  1. 1.3.1 Avantages
  2. 1.3.2 Limites
  3. 1.3.3 Cas d’usage typiques
4. 1.4 Comment choisir entre SSG et SSR ?
5. 1.5 Incremental Static Regeneration (ISR)
6. 1.6 Exemples pratiques avec l’App Router
  1. 1.6.1 Exemple SSG (force-static)
  2. 1.6.2 Exemple SSR (force-dynamic)
7. 1.7 Synthèse comparative
2. Maîtriser l’Incremental Static Regeneration (ISR)
1. 2.1 Définition et objectif
2. 2.2 Fonctionnement avec l’App Router
3. 2.3 Exemple complet d’implémentation
4. 2.4 Cycle de vie et comportement détaillé
5. 2.5 Comparaison SSG/SSR/ISR
6. 2.6 Avantages principaux
7. 2.7 Limitations techniques
8. 2.8 Bonnes pratiques de configuration
9. 2.9 Résumé global du mode ISR
3. Du Pages Router à l’App Router : évolution du modèle de données
1. 3.1 Contexte historique : de getStaticProps à fetch()
2. 3.2 Refonte du modèle avec l’App Router
  1. 3.2.1 Activer un comportement SSG/ISR (revalidate)
  2. 3.2.2 Forcer un comportement SSR (force-dynamic)
3. 3.3 Migration depuis le Pages Router
4. 3.4 Fetching client : rôle de useEffect()
5. 3.5 fetch() intelligent dans Next.js
  1. 3.5.1 Revalidation ciblée (tags et chemins)
  2. 3.5.2 Points d’attention (mélange statique/dynamique)
6. 3.6 Bonnes pratiques de fetching moderne
7. 3.7 Synthèse : un modèle unifié de rendu et de données
4. Ajouter la réactivité côté client avec TanStack Query
1. 4.1 Pourquoi combiner SSR et TanStack Query ?
2. 4.2 Installation et configuration initiale
3. 4.3 Mise en place du QueryClientProvider
  1. 4.3.1 Création du provider
  2. 4.3.2 Intégration dans layout.tsx
4. 4.4 Utilisation de useQuery dans un client component
5. 4.5 Préchargement des données côté serveur
  1. 4.5.1 Côté serveur (App Router)
  2. 4.5.2 Côté client
6. 4.6 Combiner TanStack Query avec SSG, SSR et ISR
7. 4.7 Résumé et avantages clés
5. Simplifier les interactions serveur avec les Server Actions
1. 5.1 Contexte : avant les Server Actions
2. 5.2 Qu’est-ce qu’une Server Action ?
3. 5.3 Exemple complet de mise en œuvre
  1. 5.3.1 Définition côté serveur
  2. 5.3.2 Utilisation dans un formulaire
4. 5.4 Bonnes pratiques d’écriture
5. 5.5 Gestion des erreurs
6. 5.6 Cas d’usage typiques
7. 5.7 Comparaison avec les API Routes
8. 5.8 Limitations actuelles et évolutions prévues
9. 5.9 Synthèse générale

Back-end intégré dans Next.js

1. Comprendre le rôle des API Routes
1. 1.1 Pourquoi des API Routes dans Next.js ?
2. 1.2 Où créer une API Route ?
3. 1.3 Exemple simple de route GET
4. 1.4 Structure typique d’une route
5. 1.5 Points d’entrée : Request et NextResponse
  1. 1.5.1 L’objet Request
  2. 1.5.2 L’objet NextResponse
  3. 1.5.3 Exemple pratique
6. 1.6 Quand utiliser une API Route ?
2. Comparer API Routes et Server Actions
1. 2.1 API Routes vs Server Actions
2. 2.2 Bonnes pratiques d’API Routes
3. Interagir avec la base de données grâce à Prisma
1. 3.1 Pourquoi choisir Prisma avec Next.js ?
2. 3.2 Installer et configurer Prisma
3. 3.3 Définir son modèle de données
4. 3.4 Générer la base et les types associés
5. 3.5 Utiliser Prisma dans une API Route
6. 3.6 Structuration propre avec un client global
7. 3.7 Cas pratique : création d’un utilisateur
8. 3.8 Utilisation côté client
9. 3.9 Bonnes pratiques à adopter avec Prisma
4. Sécuriser l’application avec NextAuth.js
1. 4.1 Pourquoi sécuriser son application ?
2. 4.2 Choix de l’outil : NextAuth.js
3. 4.3 Installation
4. 4.4 Création du fichier d’authentification
5. 4.5 Accès à la session côté serveur
6. 4.6 Accès à la session côté client
7. 4.7 Sécuriser une API Route
8. 4.8 Sécuriser une Server Action
9. 4.9 Stocker la session avec Prisma (optionnel)
  1. 4.9.1 Modèles Prisma à ajouter
  2. 4.9.2 Configuration de l’adapter Prisma
5. Gérer des événements externes avec les webhooks
1. 5.1 Qu’est-ce qu’un webhook ?
2. 5.2 Où placer un webhook dans Next.js ?
3. 5.3 Exemple : intégrer un webhook Stripe
  1. 5.3.1 Installation des dépendances
  2. 5.3.2 Création d’un handler sécurisé
4. 5.4 Sécuriser son webhook Stripe
  1. 5.4.1 Vérification de signature (indispensable)
  2. 5.4.2 Protection de l’URL du webhook
5. 5.5 Exemples d’intégration de webhooks
6. 5.6 Tester les webhooks en local
7. 5.7 Bonnes pratiques
8. 5.8 En résumé
6. Comprendre le modèle serverless
1. 6.1 Pourquoi serverless ?
2. 6.2 Les Serverless Functions dans Next.js
3. 6.3 Exemple de Serverless Function
4. 6.4 Les Edge Functions
5. 6.5 Quand utiliser une Edge Function ?
6. 6.6 Exemple d’Edge Middleware
7. 6.7 Comparaison Serverless vs Edge
8. 6.8 Bonnes pratiques

Optimisation, performances et référencement

1. Optimiser les images avec Next.js
1. 1.1 Pourquoi optimiser les images ?
2. 1.2 Le composant natif
3. 1.3 Propriétés essentielles du composant
4. 1.4 Exemple d’image responsive
5. 1.5 Optimisation des images distantes
6. 1.6 Placeholder flouté
7. 1.7 Limites et précautions
8. 1.8 Bonnes pratiques à respecter
2. Polices et scripts : performance et sécurité
1. 2.1 Pourquoi s’en soucier ?
2. 2.2 Gestion des polices avec next/font
  1. 2.2.1 Exemple avec une police Google (Inter)
  2. 2.2.2 Avantages : préchargement, confidentialité, fallback
3. 2.3 Polices locales avec next/font/local
4. 2.4 Gestion des scripts tiers avec

Auteur

Alexis MAISON

Alexis MAISON est développeur full-stack spécialisé dans l’écosystème TypeScript et Next.js depuis près de six ans. Il conçoit, développe et déploie des applications web pour des entreprises, des institutions et des projets internationaux, en intervenant sur l’ensemble de la chaîne : architecture, front-end, back-end et mise en production. Il accompagne également des étudiants et des développeurs en activité via des formations en ligne, des ateliers pratiques et des programmes pédagogiques centrés sur les technologies modernes du web. Passionné par la transmission de savoir, il privilégie une approche concrète, fondée sur des retours d’expérience réels, pour aider les développeurs à gagner en autonomie, en qualité de code et en professionnalisme dans leurs projets Next.js.

Caractéristiques

Caractéristiques

Téléchargements

Alexis MAISON

Nos nouveautés