Tutoriel pour créer un site web avec Next.js

Vue d’ensemble

Next.js est un framework basé sur React conçu pour simplifier la création d’applications web performantes. Il propose plusieurs modes de rendu (pré-rendu statique, rendu côté serveur) et un routage par fichiers qui accélère la mise en place d’un site optimisé pour le SEO et l’expérience utilisateur.

À retenir : Next.js combine routage par fichiers, options de rendu (SSG, SSR, ISR) et API intégrées pour produire des sites rapides et faciles à déployer.

Prérequis

• Node.js installé (version LTS recommandée).
• Connaissances de base en React (composants, hooks).
• Un terminal et un éditeur de code (VS Code recommandé).

Initialiser un projet Next.js

1. Créez un dossier et initialisez npm : npm init -y.
2. Installez les dépendances : npm install next react react-dom.
3. Ajoutez dans package.json les scripts minimaux :
   • "dev": "next dev"
   • "build": "next build"
   • "start": "next start"

Ces étapes posent la base. Ensuite lancez npm run dev pour démarrer le serveur de développement.

Structure de projet et routage

• Dossier pages/ : chaque fichier JS/TS exportant un composant React devient une route. Ex. pages/about.js → /about.
• pages/index.js correspond à la racine /.
• Routes dynamiques : fichiers entre crochets, ex. pages/post/[id].js pour /post/123.
• public/ : fichiers statiques (images, favicon) servis tels quels.

Récupération de données : SSG, SSR, ISR (synthèse)

• getStaticProps : exécute au build, idéal pour contenu stable.
• getServerSideProps : exécute à chaque requête, utile pour données toujours fraîches.
• ISR (Incremental Static Regeneration) : permet de regénérer une page statique périodiquement (paramètre revalidate).

Tableau comparatif :

Méthode	Quand l’utiliser	Avantages	Inconvénients
getStaticProps (SSG)	Contenu rarement modifié	Très rapide, bon pour le SEO	Nécessite rebuild pour données changeantes (sauf ISR)
getServerSideProps (SSR)	Contenu dynamique par requête	Données toujours à jour	Latence serveur à chaque requête
ISR (revalidate)	Contenu majoritairement statique mais mis à jour	Meilleur compromis perf/actualisation	Complexité de cache et invalidation

Remarque : n’inventez pas de valeurs de revalidate sans test ; choisissez en fonction de la fréquence de mise à jour souhaitée.

API routes

• Créez des endpoints serverless dans pages/api/. Ex. pages/api/hello.js exporte une fonction handler(req, res).
• Utile pour form handlers, proxys d’API, ou logique côté serveur simple.

Styles et composants

• Options courantes : CSS Modules (*.module.css), CSS global, bibliothèques CSS-in-JS (ex. styled-components) ou utilitaires (ex. Tailwind CSS).
• Placez les styles globaux dans styles/globals.css et importez-les dans pages/_app.js.

TypeScript

• Next.js supporte TypeScript nativement. Pour activer : ajoutez un tsconfig.json à la racine ; Next détectera et configurera les fichiers nécessaires.

Outils de qualité et expérience dev

• ESLint : standardise et détecte les erreurs. Intégrez via npm install eslint et config .eslintrc.
• Prettier : formatage automatique. Combinez Prettier et ESLint (via plugins) pour un flux propre.
• Utilisez le mode développement (npm run dev) pour rechargements à chaud et diagnostics.

Build et déploiement

• Pour production : npm run build génère la version optimisée, puis npm start pour démarrer.
• Déploiement : Vercel est la plateforme d’origine pour Next.js (déploiement simplifié), mais toute plateforme supportant Node.js peut héberger l’app. Pour les sites statiques générés, des hébergeurs statiques sont possibles selon la configuration.
• Vérifiez les variables d’environnement pour les clés privées et activez les headers de sécurité si nécessaire sur l’hébergeur.

Bonnes pratiques performance et SEO

• Privilégiez le pré-rendu (getStaticProps) lorsque possible pour le SEO.
• Optimisez les images avec le composant next/image (chargement adaptatif, lazy-loading automatique).
• Minimisez les bundles : importez dynamiquement les modules lourds avec next/dynamic si nécessaire.
• Activez HTTP caching côté serveur/CDN et configurez correctement les en-têtes pour assets statiques.

Erreurs courantes et solutions rapides

• Page blanche après build : vérifier erreurs dans la console de build et dépendances manquantes.
• Routes non trouvées : vérifier l’emplacement des fichiers dans pages/ et la casse des noms.
• Problèmes de CORS avec API externes : utiliser un proxy serveur (API route) ou configurer l’API distante.

Ressources utiles (actionnables)

• Lancer npm run dev pour développement.
• Tester getStaticProps vs getServerSideProps selon l’usage.
• Ajouter ESLint/Prettier et un workflow Git pour garantir la qualité du code.