Configuration de l’environnement de développement

Avant de plonger dans le code, on va vérifier que notre environnement de développement est prêt.

Installer Node.js et npm

Assure-toi d’avoir Node.js installé sur ta machine, de préférence la version LTS actuelle. On peut vérifier en exécutant node -v dans un terminal. Node.js est nécessaire pour lancer le serveur de développement Next.js et installer les dépendances via npm (ou yarn). S’il n’est pas installé, téléchargez-le depuis le site officiel nodejs.org et suis les instructions d’installation.

Environnement de développement

Tu peux choisir l'éditeur de code ou terminal que tu veux. Il y a deux pages dans ce guide qui explique les cas d'usage et comment installer Cursor et Claude Code.

Cursor - IDE boosté à l'IA

Il y a une page pour Cursor et comment l'installer : IDE x IA

Claude Code - Terminal boosté à l'IA

Il y a une page pour Claude Code et comment l'installer : Terminal x IA

Création du projet Next.js

On va utiliser Next.js comme base du front-end et back-end. Next.js offre un générateur de projet qui nous fera gagner du temps.

Initialisation : Dans un terminal, navigue vers le dossier où tu souhaite créer le projet et exécute :
pnpm dlx create-next-app@latest habits --typescript
Ceci créera un nouveau dossier habits avec une application Next.js configurée en TypeScript. Tu peux dire oui à toutes les options par défaut lors de l'installation.

Tu peux omettre --typescript si tu préfères JavaScript pur, mais tu vas perdre l’auto-complétion et la détection d’erreurs via l'analyse statique, d’autant que l’IA peut t’aider avec les types.
Vérification : Navigue dans le dossier du projet et lance le serveur de développement.
cd habits pnpm dev

Ouvre http://localhost:3000 dans un navigateur. Tu devrais voir la page d’accueil Next.js par défaut, confirmant que tout fonctionne.