Next.js est le framework React le plus populaire pour créer des applications web full-stack modernes. Il ajoute le rendu côté serveur (SSR), la génération statique (SSG), le routage basé sur les fichiers et bien plus. Voici tout ce qu'il faut savoir pour démarrer avec next.
Pourquoi Next.js ?
React seul est une librairie UI : il ne gère pas le routage, l'optimisation SEO ou les performances avacées. Next.js résout ces limites avec une opinion structurée sur l'architecture. Les avantages concrets : SEO excellent grâce au SSR, performances optimisées, déploiement trivial sur Vercel, et un système de routage intuitif basé sur le système de fichiers.
App Router : la nouvelle architecture Next
Depuis Next 13, l'App Router est la solution recommandée. Les fichiers dans app/ définissent les routes : app/page.tsx = page d'accueil, app/blog/page.tsx = /blog, app/blog/[slug]/page.tsx = route dynamique.
// app/blog/[slug]/page.tsx
export default async function BlogPost({ params }: { params: { slug: string } }) {
const post = await getPost(params.slug); // Fetch direct côté serveur
return <article>{post.content}</article>;
}
// Génération statique des slugs connus
export async function generateStaticParams() {
const posts = await getAllPosts();
return posts.map(p => ({ slug: p.slug }));
}
Server Components vs Client Components
Par défaut dans l'App Router, tous les composants sont des Server Components : ils s'exécutent uniquement côté serveur, peuvent accéder directement à la BDD, et leur code JavaScript n'est pas envoyé au client. Zero bundle size.
Les Client Components ('use client' en tête de fichier) sont nécessaires pour l'interactivité (useState, useEffect, événements). Minimisez leur usage pour des performances optimales.
Stratégies de rendu
Next offre trois stratégies principales selon les besoins :
SSG (Static Site Generation) : généré au build, ultra-rapide, idéal pour les blogs et pages statiques. generateStaticParams() génère les pages dynamiques statiquement.
SSR (Server-Side Rendering) : généré à chaque requête, données toujours fraîches, bon pour les pages personalisées.
ISR (Incremental Static Regeneration) : statique avec re-génération périodique. revalidate: 3600 refranchit la page toutes les heures.
API Routes
Next.js intègre un serveur API : app/api/contact/route.ts définit une route API :
export async function POST(request: Request) {
const body = await request.json();
// Traitement...
return Response.json({ success: true });
}
Optimisations intégrées
Next.js optimise automatiquement : images (composant next/font), scripts tiers (chargement différé via