Pourquoi Next.js et concepts fondamentaux

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

Next.js est un framework construit au-dessus de React. Là où React est une simple bibliothèque pour construire des interfaces, Next.js ajoute toute la couche manquante pour produire une application web complète, performante et prête pour la production.

Maintenu par Vercel, Next.js est aujourd'hui le choix par défaut pour la grande majorité des projets React modernes (Netflix, TikTok, Notion, Hulu, Twitch).

🆚 Next.js vs React : que change le framework ?

React seul ne sait que produire du HTML côté navigateur (CSR). Next.js apporte plusieurs modes de rendu, le routing, l'optimisation des images, l'internationalisation, la gestion des métadonnées SEO et bien plus encore.

🚀 Les 4 modes de rendu Next.js

C'est la grande force du framework : choisir le bon mode de rendu pour chaque page.

🛠️ App Router vs Pages Router

Depuis Next.js 13, le App Router (dossier app/) est le système recommandé. Il remplace progressivement le Pages Router (dossier pages/) qui reste supporté pour compatibilité.

• App Router : Server Components par défaut, layouts imbriqués, streaming, Server Actions
• Pages Router (legacy) : tout est Client Component, getServerSideProps, getStaticProps

💡 Astuce : pour un nouveau projet en 2026, utilise toujours l'App Router. C'est le futur du framework.

🧩 Server Components vs Client Components

L'App Router introduit une distinction fondamentale entre deux types de composants :

• Server Components (par défaut) : exécutés sur le serveur, peuvent accéder directement à la base de données, ne sont jamais envoyés au navigateur sous forme de JavaScript
• Client Components : exécutés dans le navigateur, peuvent utiliser useState, useEffect, gérer les événements (clicks, formulaires interactifs)

Règle d'or : commence toujours par un Server Component, et passe en Client Component uniquement si tu as besoin d'interactivité.

📦 Structure d'un projet Next.js

• app/ — toutes les routes et pages de l'application
• components/ — composants UI réutilisables
• lib/ — utilitaires, helpers, accès base de données
• public/ — fichiers statiques (images, fonts, robots.txt)
• next.config.js — configuration Next.js
• package.json — dépendances et scripts

📄 Fichiers spéciaux dans app/

⚡ Installer Next.js en 30 secondes

Une seule commande lance un wizard interactif qui configure tout : npx create-next-app

Le wizard pose les questions suivantes :

• Nom du projet
• TypeScript ? (oui recommandé)
• ESLint ? (oui)
• Tailwind CSS ? (oui pour styling rapide)
• App Router ? (oui)
• Alias d'import (par défaut "@/*")

💼 Pourquoi les équipes choisissent Next.js

• SEO natif — le HTML est rendu côté serveur, Google indexe sans souci
• Performance — code splitting, image optimization, font optimization automatiques
• Developer Experience — hot reload ultra-rapide avec Turbopack
• Écosystème — déploiement Vercel en 1 clic, intégrations multiples
• Stabilité — utilisé par des géants à très grande échelle

✅ À retenir : Next.js = React + (SSR/SSG/ISR/RSC) + routing + optimisations. C'est le framework full-stack qui couvre tous les besoins.