Si tu construis un SaaS, une application web complexe ou un site e-commerce ultra-rapide, tu utilises probablement Next.js (basé sur React).

Concrètement, qu'est-ce que Claude Code t'apporte ? Il est capable de générer des pages entières avec un design parfait, de structurer ton architecture, et surtout de résoudre les fameux conflits entre le code qui s'exécute sur le serveur et celui qui s'exécute dans le navigateur.

1. Ce que Claude Code peut faire pour toi

Next.js demande beaucoup de code répétitif (boilerplate). Claude Code va l'écrire à ta place.

  • Création de routes (App Router) : Il sait créer les dossiers app/ma-page avec les fichiers page.tsx et layout.tsx au bon endroit.
  • Server vs Client Components : Il peut analyser un composant et te dire s'il a besoin de la directive "use client".
  • Design instantané : Grâce à sa maîtrise de Tailwind CSS, tu peux lui décrire un design visuel, il l'écrira en classes utilitaires parfaites.
  • API Routes : Il peut générer des routes API complètes (GET, POST) pour communiquer avec ta base de données.
  • Typage : Il écrit un TypeScript extrêmement strict et robuste.

2. Scénarios concrets (Comment l'utiliser)

Scénario 1 : Créer un dashboard complexe

Au lieu de créer 10 fichiers à la main, utilise l'IA pour générer la structure complète :

Claude va créer la page, les composants enfants (cartes de statistiques, graphiques), et appliquer les couleurs de ton projet.

Scénario 2 : Refactoriser un énorme composant

Ton fichier Navbar.tsx fait 500 lignes et devient illisible. Dis-lui : "Ce composant est trop grand. Découpe-le en 4 sous-composants plus petits (Logo, Menu, Boutons, Mobile) et place-les dans un nouveau dossier."

Scénario 3 : Ajouter le mode Sombre (Dark Mode)

Dis à Claude : "Ajoute le support du mode sombre avec Tailwind sur toutes les pages du dossier /app/blog/. Assure-toi que le texte passe en blanc et le fond en gris foncé."

3. Les bonnes pratiques

Bonnes pratiques

Règle d'or : Fournis ton design system.
Si tu ne dis rien, Claude inventera des couleurs (du bleu générique). Dis-lui toujours : "Dans ce projet, notre couleur principale est #FF5500. Utilise cette valeur ou sa variable Tailwind associée pour les boutons."

Bonnes pratiques

Précise toujours ta version :
Commence tes conversations par : "Ce projet utilise Next.js 14 avec l'App Router, TypeScript et Tailwind CSS." Cela évite qu'il te génère du vieux code React de 2019.

4. Les erreurs les plus fréquentes

Attention

L'erreur fatale "useState only works in Client Components" : C'est l'erreur la plus courante. Claude essaie parfois d'utiliser un état interactif (React) dans un composant serveur. Dis-lui simplement : "Tu as oublié 'use client' en haut du fichier, corrige ça."

Attention

Les hallucinations de bibliothèques : Claude peut te générer du code utilisant framer-motion ou lucide-react sans avoir installé ces bibliothèques ! Ton build plantera. Vérifie toujours s'il a pensé à exécuter npm install.

5. Checklist du développeur Next.js

Bonnes pratiques
  1. J'ai précisé que j'utilise l'App Router.
  2. J'ai défini si mon composant doit être Client ou Serveur.
  3. J'ai vérifié que les dépendances nécessaires sont installées dans le package.json.
  4. J'ai testé la route générée dans mon navigateur (http://localhost:3000).
  5. J'ai validé le code TypeScript sans erreurs rouges dans VS Code.

6. FAQ

Oui, mais il a lu tout internet, y compris des millions d'articles sur l'ancien système (Pages Router). Si tu ne précises pas 'Utilise l'App Router', il risque de créer des fichiers dans le mauvais dossier.
C'est l'un de ses meilleurs talents. Demande-lui simplement : 'Convertis tous mes fichiers .jsx en .tsx et ajoute les bons types TypeScript partout'.
Techniquement non, mais c'est fortement recommandé. Si Claude fait une erreur dans un état (useState) ou un effet (useEffect), tu auras du mal à la corriger sans les bases.

Ton interface est maintenant magnifique et codée en un temps record. Mais une application a besoin de stocker des données. Dans le prochain chapitre, nous verrons comment lier tout cela à une vraie base de données avec Supabase.

Chapitre terminé