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.
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.
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.
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’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.
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 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.
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.
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.
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.
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.
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.