Cursor, les IDE et les bases du terminal pour débuter proprement

Série — Vibe coding pour non-dev 1. Cursor et le terminal · 2. React + Vite · 3. Next.js · 4. Bonnes pratiques

Introduction

Tu n'as pas besoin de devenir développeur pour construire des choses utiles avec l'IA. Tu as surtout besoin d'un cockpit : un endroit où tu vois ton code, tu parles à l'IA, et tu lances les commandes qui font tourner ton projet.

Cet endroit, pour moi, c'est Cursor.

Cursor n'est pas qu'un éditeur de texte avec une couche IA. C'est l'outil où tout se passe au début : tu ouvres ton dossier de projet, tu poses des questions à l'agent, tu exécutes npm install ou npm run dev dans le terminal intégré — sans jongler entre dix applications.

Dans cet article, on pose les fondations :

• comprendre juste ce qu'il faut de Node, npm et npx pour ne plus avoir peur du terminal ;
• configurer le terminal intégré de Cursor (CMD vs PowerShell sur Windows) ;
• choisir entre React + Vite et Next.js selon ton besoin réel ;
• appliquer les premières règles pour structurer un projet dès le départ.

Les tutoriels pas-à-pas pour initialiser React + Vite ou Next.js sont dans les articles suivants de la série.

---

Préambule : Node, npm, npx sans se prendre la tête

Avant de parler de React, Vite ou Next, il faut qu'on règle le sujet qui fait peur à tout le monde : le terminal. La fenêtre noire avec du texte blanc qui te regarde comme si tu allais tout casser en tapant une mauvaise commande.

On ne va pas faire un cours de programmation. Tu as juste trois mots à connaître : node, npm et npx.

• node te permet de faire tourner du JavaScript en dehors du navigateur.
• npm est le gestionnaire qui installe et gère les « briques » dont ton projet a besoin (les packages).
• npx sert surtout à lancer facilement des outils qui créent pour toi une structure de projet standard.

Ce qui compte à ce stade, ce n'est pas de comprendre chaque package ou chaque ligne de configuration. Ce qui compte, c'est de comprendre que des gens sérieux ont déjà conçu une structure cohérente de projet, et que les commandes npm/npx que tu vas taper servent juste à générer cette structure proprement.

Concrètement, ton job sera souvent de faire trois choses :

1. lancer une commande qui crée le projet ;
2. installer les dépendances ;
3. démarrer le serveur local.

Le reste, tu vas le déléguer à Cursor et aux outils de la stack. Ton rôle, ce sera surtout de bien décrire ce que tu veux construire.

---

Où taper les commandes : terminal intégré de Cursor, PowerShell ou CMD

Avant de lancer la moindre commande, il y a une question simple à régler : où tu les tapes.

Dans cet article, on va tout faire dans le terminal intégré de Cursor, pas dans dix fenêtres différentes. L'idée, c'est que tu aies au même endroit : ton code, ton projet, et les commandes npm / npx.

Une fois ton dossier de projet ouvert dans Cursor (File → Open Folder), ouvre le terminal intégré :

• via le menu Terminal ;
• et clique sur New Terminal.

En bas de l'écran, tu verras un terminal avec un onglet. Sur Windows, cet onglet est souvent en PowerShell par défaut.

PowerShell ou CMD dans Cursor : quoi choisir ?

Les deux savent exécuter des commandes Node, mais en pratique :

• PowerShell peut parfois bloquer certaines commandes (npx par exemple) ou afficher des messages liés à la sécurité / exécution de scripts.
• CMD (Command Prompt) est souvent plus simple et plus tolérant pour un usage de base avec Node (npm, npx, npm run dev).

Pour éviter de te battre avec des messages obscurs quand tu débutes, tu peux configurer Cursor pour utiliser CMD par défaut :

1. Dans le terminal de Cursor, clique sur la petite flèche à côté de l'onglet du terminal.
2. Choisis "Select Default Profile" (ou équivalent en français).
3. Sélectionne Command Prompt / CMD comme profil par défaut.
4. Ouvre un nouveau terminal dans Cursor : il s'ouvrira en CMD, directement dans ton projet.

Visuellement :

• en CMD, tu verras un prompt du type :

  C:\Users\ton-nom\mon-projet>

• en PowerShell, tu verras un prompt du type :

  PS C:\Users\ton-nom\mon-projet>

Pour suivre cette série sans te prendre la tête, pars sur cette règle simple :

• si ton terminal intégré Cursor affiche CMD, tu peux copier-coller toutes les commandes (npm create vite@latest, npx create-next-app@latest, npm install, npm run dev) sans te soucier des restrictions PowerShell ;
• si tu vois un prompt en PowerShell et que tu tombes sur des erreurs liées à l'exécution de scripts, commence par basculer sur CMD avec les étapes ci-dessus.

Avant de lancer une commande, vérifie toujours deux choses :

1. Le terminal est bien dans le dossier de ton projet (tu vois le nom du dossier dans le chemin).

2. La commande suivante te renvoie un numéro de version et pas une erreur :

   npm -v

Si tu as un message d'erreur que tu ne comprends pas, tu peux le copier-coller dans Cursor et lui demander :

"Explique-moi cette erreur comme si j'étais débutant, et dis-moi si je dois modifier quelque chose dans le terminal (CMD vs PowerShell, dossier courant, etc.)."

---

Pourquoi cette stack : React + Vite et Next.js, et pas autre chose

Quand tu ne sais pas coder, le pire piège c'est d'avoir trop de choix techniques. Tu tombes sur des mots-clés partout : Vue, Svelte, Astro, Remix, frameworks fullstack "magiques", boilerplates payants, etc.

L'objectif ici n'est pas de choisir "la stack parfaite pour 10 ans". L'objectif, c'est de prendre une stack assez standard, assez simple à lancer, et assez documentée pour que tu puisses t'appuyer dessus sans comprendre tout ce qui se passe dedans.

C'est pour ça qu'on va se limiter à deux options :

• React + Vite pour les applications (dashboard, outil interne, interface interactive).
• Next.js pour les sites vitrines + blogs (SEO, pages, contenu).

Ce sont deux setups :

• massivement utilisés en production ;
• bien compris par Cursor et les autres IA ;
• faciles à lancer avec quelques commandes npm/npx.

Tu n'as pas besoin de réinventer la roue. Tu profites juste du fait que des milliers de développeurs ont déjà standardisé cette structure pour toi.

---

React + Vite : quand tu veux une application

Tu choisis React + Vite quand ton objectif ressemble à :

• "Je veux une interface où l'utilisateur clique, tape, interagit beaucoup."
• "Je veux un petit outil interne / dashboard / configurateur."
• "Le SEO n'est pas la priorité, c'est surtout un outil que les gens vont utiliser une fois connectés."

Vite te donne une chose clé : un environnement de développement ultra rapide. Tu lances ton projet, tu modifies un fichier, tu vois le résultat presque instantanément dans le navigateur.

Pour toi, en tant que non-dev, ça change un truc très concret : tu peux tester, casser, ajuster en boucle sans te battre avec la config.

Ce combo React + Vite est intéressant parce que :

• il reste simple à démarrer (npm create vite@latest) ;
• la structure de projet est lisible (un dossier src, des composants React) ;
• Cursor sait très bien générer et modifier des composants React dans ce contexte.

Si tu veux faire une application (et pas forcément être trouvé sur Google avec ce projet), c'est un bon choix par défaut.

---

Next.js : quand tu veux un site vitrine + blog

Tu choisis Next.js quand ton objectif ressemble à :

• "Je veux un site vitrine propre pour mon produit / ma boîte."
• "Je veux un blog que Google puisse indexer correctement."
• "Je veux des pages avec des URLs propres, du texte, des images, un peu de navigation."

Next repose sur React, mais t'ajoute tout ce que tu ne veux pas gérer toi-même :

• un système de pages (tu crées un fichier → tu obtiens une route) ;
• un rendu côté serveur pensé pour le SEO ;
• une structure qui colle naturellement à un site de contenu (vitrine + blog).

Pour un non-dev, la différence est simple :

• React + Vite : tu penses "écran d'application".
• Next.js : tu penses "page de site".

Même si tu ne comprends pas ce que font toutes les options techniques, ce qui t'intéresse c'est :

• tu peux créer un site vitrine + blog propre avec quelques commandes ;
• tu peux décrire à Cursor : "crée-moi une page d'accueil, une page À propos, une page Blog" ;
• tu pourras plus tard brancher une base SQL pour stocker tes contenus ou tes données, sans tout refaire.

Next est devenu un standard de facto pour ce type de besoin. Donc quand tu demandes de l'aide à Cursor ou à un dev, tout le monde voit à peu près la même chose dans sa tête.

---

Comment choisir rapidement sans paniquer

Si tu dois retenir une règle simple :

• Tu veux une app / un outil / un dashboard → pars sur React + Vite.
• Tu veux un site vitrine + blog → pars sur Next.js.

Tu peux faire l'inverse, bien sûr, mais ce n'est pas le but. Le but, c'est d'avoir une décision qui tient en une phrase, pour ne pas rester bloqué une semaine sur "quel framework choisir".

Dans les deux cas, la promesse est la même :

• quelques commandes dans le terminal ;
• un serveur local qui tourne en quelques minutes ;
• un projet structuré que Cursor peut comprendre et t'aider à faire évoluer.

---

Premières règles pour structurer un projet dès le départ

Avant de lancer npm create vite@latest ou npx create-next-app@latest, quelques réflexes qui t'évitent de casser ton projet dès la première semaine.

1. Ouvre la racine du projet dans Cursor

Cursor doit regarder le dossier de ton projet, pas ton dossier utilisateur général. Utilise File → Open Folder et sélectionne le dossier racine — celui qui contiendra package.json une fois le projet créé.

Si Cursor ne voit pas la bonne arborescence, l'IA travaille à l'aveugle.

2. Pars des générateurs officiels

Ne télécharge pas un boilerplate random sur GitHub. Lance npm create vite@latest ou npx create-next-app@latest : tu obtiens une structure standard que Cursor connaît par cœur.

3. Ne touche pas aux fondations sans raison

Au début, évite de modifier :

• les scripts npm dans package.json ;
• l'arborescence globale des dossiers ;
• les fichiers de configuration que tu ne comprends pas encore.

Interviens surtout dans les composants (.jsx / .tsx) et le contenu des pages.

4. Choisis ta stack en une phrase

App / outil / dashboard → React + Vite. Site vitrine + blog → Next.js.

Décide, initialise, avance. Tu pourras toujours changer plus tard — mais pas besoin de changer maintenant.

5. Crée un fichier NOTES.md dès le départ

À la racine du projet, écris noir sur blanc :

• ce qu'est le projet ;
• qui l'utilise ;
• le ton et le style général ;
• les contraintes (ex. : "garder Tailwind", "ne pas toucher au dossier app").

Ensuite, dis à Cursor :

"Lis le fichier NOTES.md et respecte ces contraintes quand tu modifies le projet."

C'est une première version de cadrage — avant même d'en arriver aux cursorrules avancées.

---

Suite de la série

Tu as maintenant le cadre : Cursor comme cockpit, le terminal configuré, la stack choisie, les règles de base posées.

Prochaine étape selon ton choix :

• Initialiser un projet React + Vite — pour une application ou un outil interne.
• Initialiser un projet Next.js — pour un site vitrine ou un blog.

Une fois ton projet lancé en local, passe à les bonnes pratiques de vibe coding avec Cursor.