Next.js : le framework React de référence

Next.js, React enrichi

Next.js est un meta-framework construit sur React qui ajoute les fonctionnalités manquantes pour construire des applications web complètes : rendu côté serveur, routage, optimisations automatiques, API routes, internationalisation. Développé par Vercel, largement adopté dans l’industrie, il est devenu le choix par défaut pour de nombreux projets React en production. Ce tutoriel explique les concepts clés et propose une prise en main structurée.

Pourquoi Next.js plutôt que React seul

React est une bibliothèque d’interface, pas un framework complet. Pour un projet réel, il faut ajouter : routage (pour les différentes pages), SSR ou SSG (pour le SEO et la performance), optimisation des images, bundle splitting intelligent, configuration de build. Next.js fournit tout cela nativement, avec des conventions solides.

Pour une landing page ou une application d’administration interne, React seul (Vite) suffit peut-être. Pour un site e-commerce, un blog, un SaaS destiné au référencement, Next.js apporte des avantages concrets.

Créer un projet Next.js

npx create-next-app@latest. L’outil pose plusieurs questions : TypeScript oui, ESLint oui, Tailwind CSS selon préférence, App Router (nouveau système, recommandé). Vous obtenez un projet prêt à démarrer : npm run dev lance le serveur de développement.

La structure inclut app/ (le nouveau routeur basé sur les fichiers), public/ (fichiers statiques), next.config.js (configuration).

Le routage basé sur les fichiers

Next.js utilise la structure de fichiers pour définir les routes. app/page.tsx est la page d’accueil (/). app/about/page.tsx correspond à /about. app/blog/[slug]/page.tsx crée des routes dynamiques avec paramètre. app/dashboard/layout.tsx définit un layout partagé par toutes les pages du dossier dashboard/.

Cette convention, une fois comprise, rend la structure du site immédiatement lisible. Pas de fichier de routes à maintenir séparément.

Les layouts imbriqués

Les layouts persistent entre les navigations de même niveau. Un layout peut contenir la navigation, le footer, un menu latéral. Les layouts enfants s’imbriquent dans les layouts parents, créant une hiérarchie naturelle. Cette approche optimise le rendu : seul ce qui change se re-rend.

Les composants serveur et client

Next.js 13+ introduit les React Server Components : composants qui s’exécutent uniquement côté serveur. Ils peuvent accéder directement à la base de données, ne sont jamais envoyés au client, réduisent le bundle JavaScript. Par défaut, les composants sont serveur.

Pour les composants qui nécessitent de l’interactivité (état, événements, hooks), ajoutez « use client » en haut du fichier. Ils sont alors hydratés côté client et deviennent interactifs. Cette distinction structure fondamentalement la manière de penser les applications Next.js.

La récupération des données

Dans un Server Component, vous pouvez utiliser fetch directement dans le corps du composant. Next.js étend fetch avec du cache intelligent : mise en cache automatique, revalidation configurable, déduplication des requêtes identiques.

async function UsersPage() {
  const res = await fetch('https://api.exemple.com/users', {
    next: {revalidate: 3600}
  });
  const users = await res.json();
  return <UserList users={users} />;
}

La revalidation permet de régénérer la page toutes les heures, par exemple, pour actualiser sans reconstruire.

Les routes API

Next.js inclut des routes API pour créer un backend léger. app/api/users/route.ts définit des handlers GET, POST, etc. Utile pour les petits projets ou pour compléter une architecture avec quelques endpoints. Pour un backend complexe, une API séparée (Node.js/Express, Python, etc.) reste préférable.

Next.js 15 (App Router) gère les routes API via les Route Handlers dans le dossier app/api. Un fichier app/api/users/route.ts exporte des fonctions GET, POST, PUT, DELETE qui correspondent aux verbes HTTP. La signature reçoit Request et retourne Response (objet web standard). Pour les paramètres dynamiques, créez un dossier app/api/users/[id]/route.ts qui reçoit params depuis le second argument. Cette structure unifie le frontend et le backend dans le même projet, ce qui réduit la friction de développement pour des équipes à Plateau qui livrent une app full-stack.

Le rendu : SSR, SSG, ISR

SSR (Server-Side Rendering) : page rendue à chaque requête. Idéal pour du contenu très dynamique. SSG (Static Site Generation) : pages pré-générées au moment du build. Rapide, hébergeable sur CDN, parfait pour les contenus stables. ISR (Incremental Static Regeneration) : combine les deux : pages générées statiquement mais régénérées en arrière-plan selon une durée définie.

Le choix dépend de la nature du contenu. Une page produit d’e-commerce avec stock changeant peut utiliser ISR avec revalidation de 60 secondes. Un article de blog peut être SSG. Un dashboard personnalisé peut être SSR.

L’optimisation des images

Le composant Image de Next.js optimise automatiquement : formats modernes (WebP, AVIF), dimensions adaptées à l’écran, chargement paresseux, placeholder pendant le chargement. Cette optimisation apporte des gains significatifs de performance pour peu d’effort.

import Image from ‘next/image’; puis <Image src= »/photo.jpg » alt= »Description » width={800} height={600} />. Simple et efficace.

Le composant next/image gère automatiquement le lazy loading, le responsive (srcset multi-tailles), la conversion WebP/AVIF et le cache CDN. Configurez le domaine source dans next.config.js avec images.domains pour autoriser les images externes. Pour des connexions 4G ouest-africaines, la conversion WebP réduit le poids de 30-50 % par rapport à JPG sans perte visible. L’attribut priority sur l’image hero force le préchargement et améliore le LCP. La propriété sizes informe le navigateur de la taille d’affichage prévue selon la viewport, ce qui télécharge la bonne variante.

La navigation avec Link

Le composant Link effectue une navigation côté client sans rechargement complet : import Link from ‘next/link’; puis <Link href= »/about »>À propos</Link>. Le préchargement automatique accélère encore les navigations. L’UX est comparable à une application native.

Le composant next/link préfetche automatiquement les routes liées en arrière-plan dès qu’elles entrent dans le viewport. Le clic devient instantané. Pour désactiver le prefetch (utile sur des routes peu visitées qui consomment de la bande passante mobile), passez prefetch={false}. Pour la navigation programmatique, le hook useRouter avec router.push gère les redirections après actions (login, soumission de formulaire). Évitez les balises <a href= »/internal »> classiques qui forcent un rechargement complet et perdent l’état React.

Les métadonnées pour le SEO

Next.js facilite la gestion des métadonnées (title, description, Open Graph, Twitter Card). Exportez un objet metadata depuis page.tsx ou layout.tsx :

export const metadata = {
  title: 'Mon Article',
  description: 'Description pour les moteurs',
};

Les métadonnées dynamiques (basées sur les données de la page) utilisent generateMetadata.

L’API metadata d’App Router permet de définir title, description, Open Graph, Twitter Card via export const metadata dans chaque page.tsx. Pour les pages dynamiques (article de blog), utilisez generateMetadata async qui reçoit params et retourne l’objet metadata. Le sitemap se génère via app/sitemap.ts qui exporte un async function listant toutes les URLs avec lastModified et priority. robots.txt se gère via app/robots.ts. Cette intégration native dispense des plugins SEO et garantit le rendu côté serveur des balises critiques pour Google.

L’internationalisation

Pour les sites multilingues, Next.js supporte l’internationalisation via le routage. Les URLs peuvent intégrer le code langue (/fr/about, /en/about). Des bibliothèques comme next-intl ou next-i18next ajoutent la gestion des traductions.

Next.js 15 ne fournit pas d’i18n built-in dans App Router (contrairement aux Pages Router déprécié). La bibliothèque next-intl est devenue le standard de facto. Définissez vos traductions dans messages/fr.json et messages/ar.json, configurez la détection de langue via header Accept-Language ou cookie utilisateur. Pour un site bilingue français-arabe à Dakar, prévoyez aussi le RTL (right-to-left) via la propriété dir= »rtl » sur l’élément html quand la langue est arabe. Tailwind CSS supporte les utilitaires logical (ms-4 au lieu de ml-4) qui s’adaptent automatiquement.

Les Middleware

Les middleware s’exécutent avant les requêtes, au niveau du Edge. Idéals pour : authentification, redirections, rewrites, A/B testing, géolocalisation. middleware.ts à la racine du projet définit le middleware.

Le fichier middleware.ts à la racine du projet intercepte chaque requête avant le rendu de la page. Cas typiques : redirection (langue, ancienne URL), authentification (vérifier un cookie de session, rediriger vers login si absent), A/B testing (assigner une variante via cookie), géolocalisation (basée sur header géo IP du CDN). Le code tourne sur le runtime Edge (V8 isolates), ce qui impose des contraintes (pas de Node API native, pas de filesystem). La latence ajoutée est minime (5-20 ms) et le middleware s’exécute avant le SSR donc améliore l’expérience utilisateur.

Le déploiement sur Vercel

Vercel, éditeur de Next.js, offre le déploiement le plus fluide : connexion à GitHub, builds automatiques, preview environments pour chaque PR, CDN mondial, analytics. Le plan gratuit convient largement aux projets personnels et petits projets professionnels.

Pour d’autres hébergeurs, Next.js peut être déployé via Docker, sur AWS (avec amplify ou containers), sur Netlify, etc. L’export statique (next export) produit des fichiers purement statiques pour un hébergement minimal.

L’authentification

NextAuth.js (désormais Auth.js) gère l’authentification : providers (Google, GitHub, email), sessions, protection de routes. Pour des cas plus avancés, Clerk, Auth0, Supabase Auth offrent des solutions hébergées.

NextAuth.js (renommé Auth.js depuis 2024) reste la solution la plus mature pour gérer l’auth dans Next.js. Il supporte 50+ providers (Google, GitHub, magic link email, credentials OAuth2) avec une configuration centralisée. Les sessions sont stockées en JWT (stateless) ou en database (Prisma adapter). Pour un projet à Cocody qui veut combiner Google login pour les utilisateurs et email/password pour l’admin, Auth.js gère les deux dans la même app. Pour les besoins plus avancés (multi-tenant, RBAC complexe), Clerk ou Supabase Auth offrent plus de fonctionnalités prêtes à l’emploi.

La gestion de l’état

Pour l’état global, les solutions classiques de React s’appliquent : Context, Zustand (léger et élégant), Redux Toolkit (pour les cas complexes), TanStack Query (pour les données serveur). Les Server Components changent la donne : moins d’état client nécessaire, le serveur fait beaucoup du travail.

Pour l’état local d’un composant, useState et useReducer suffisent. Pour l’état global partagé entre plusieurs pages, Zustand est devenu le choix dominant en 2025-2026 grâce à sa simplicité (10 lignes pour un store, pas de Provider obligatoire). Redux Toolkit reste pertinent pour les apps complexes avec besoins de devtools avancés et middleware (sagas, RTK Query). TanStack Query gère parfaitement l’état serveur (cache, revalidation, invalidation) ce qui réduit drastiquement le besoin d’état global pour les apps data-driven typiques.

Les formulaires et actions

Les Server Actions permettent d’appeler directement des fonctions serveur depuis le client, sans créer d’API intermédiaire. Simplifie considérablement les formulaires. Associés à React Hook Form et Zod pour validation, ils offrent une ergonomie de développement exceptionnelle.

Server Actions (stables depuis Next.js 14) permettent d’exécuter du code serveur depuis un composant client sans créer une route API explicite. Le code décrit ressemble à async function createPost(formData) { 'use server'; await db.post.create(...) }. Le formulaire l’invoque via action={createPost}. Combiné avec react-hook-form pour la validation côté client et Zod pour la validation côté serveur, vous obtenez une expérience formulaire moderne avec validation à deux niveaux. Cette pattern divise le code par 3-4 par rapport à une API route + fetch manuel.

Les tests

Jest ou Vitest pour les tests unitaires. Playwright pour les tests end-to-end. React Testing Library pour tester les composants. Ces outils s’intègrent bien dans un projet Next.js.

L’écosystème de test Next.js suit React. Vitest pour les tests unitaires (fonctions utilitaires, composants isolés). React Testing Library pour les tests de comportement (rendu, interactions utilisateur). Playwright pour les tests end-to-end qui simulent un vrai navigateur sur les flux critiques (signup, checkout, payment). MSW (Mock Service Worker) intercepte les requêtes fetch dans les tests pour simuler des réponses API sans backend. Cette stack couvre 90 % des besoins de test d’une app moderne. Cible : 70 % de couverture sur le code critique, lancée en CI à chaque PR.

La montée en puissance

Next.js évolue rapidement. Le App Router est devenu le standard, les Server Components sont de plus en plus utilisés, Turbopack remplace progressivement Webpack. Suivre le blog officiel et la documentation aide à rester à jour sur les évolutions.

Quand le trafic dépasse 100 000 visiteurs/mois, certains patterns Next.js commencent à compter. Activez le ISR (Incremental Static Regeneration) sur les pages contenu rarement modifiées pour bénéficier du CDN. Utilisez React Server Components pour réduire le JavaScript envoyé au client. Mettez en cache les requêtes DB avec Redis pour réduire la charge Postgres. Déployez sur Vercel pour le edge worldwide ou sur Cloudflare Pages avec OpenNext pour 10x moins cher. Pour une app à Yopougon qui dépasse 500 000 visiteurs/mois, le passage à un VPS Hetzner avec PM2 + Nginx économise 90 % du coût Vercel sans perdre en performance.

Conclusion : un framework productif

Next.js structure un développement React productif et moderne. Les fonctionnalités intégrées font gagner des semaines de travail sur la configuration et l’optimisation. La prise en main initiale peut impressionner par la richesse, mais les concepts deviennent naturels après quelques projets. Pour une PME qui développe des applications web destinées à être en production, Next.js constitue un choix solide et évolutif. Lancez un premier projet simple (un blog, une landing page avec formulaire) pour découvrir, puis approfondissez au fil des besoins.