En résumé
Cursor est un IDE basé sur VS Code avec IA intégrée (GPT-4o, Claude 3.5). Associé à Next.js et au template Onyx, Cursor réduit de 60 à 70% le temps de développement d'un site vitrine : Cmd+K modifie le code sélectionné par instruction, le chat contextuel comprend toute la codebase, et l'autocomplete génère des composants React complets. Installation en 2 minutes, gratuit jusqu'à 2 000 requêtes/mois.
Cursor est VS Code avec une IA native branchée sur l'ensemble du projet. Pas un plugin — une refonte complète de l'éditeur autour de l'assistance contextuelle.
Associé à Next.js et au template Onyx, Cursor réduit le développement d'un site vitrine de 2 jours à 4 heures. Trois fonctionnalités concentrent 90 % de la valeur : Cmd+K pour modifier le code par instruction, le chat pour interroger la codebase entière, et l'autocomplete pour générer des composants complets.
Ce guide couvre l'installation, les fonctionnalités essentielles, les prompts qui fonctionnent, et les limites réelles à connaître avant de dépendre de l'outil en production.
Qu'est-ce que Cursor ?
Cursor est un fork de VS Code développé par Anysphere Inc., lancé en 2023 et adopté par plus de 500 000 développeurs actifs en 2026. L'éditeur garde 100 % des extensions et raccourcis VS Code, et ajoute une couche IA profondément intégrée dans l'interface.
Cursor vs GitHub Copilot : la différence fondamentale
GitHub Copilot complète du code ligne par ligne, sans lire l'ensemble du projet. Cursor ingère la codebase entière — chaque fichier, chaque import, chaque type TypeScript — et répond en connaissant le contexte global.
Pour un projet Next.js comme Onyx, Cursor comprend que site.config.ts pilote toute la configuration, que les blocs dans src/components/blocks/ utilisent Framer Motion, et que le contenu de la page d'accueil passe par src/data/home.ts. GitHub Copilot, lui, suggère sans ce contexte.
Tarifs Cursor en 2026
| Plan | Prix | Limites |
|---|---|---|
| Hobby | Gratuit | 2 000 complétions/mois, 50 requêtes chat lentes |
| Pro | 20 $/mois | Requêtes illimitées, modèles rapides, Cmd+K prioritaire |
| Business | 40 $/utilisateur/mois | SSO, politiques d'équipe, facturation centralisée |
Le plan Hobby suffit pour un projet vitrine complet. Le plan Pro devient rentable dès que Cursor fait économiser plus de 2 heures de développement par mois — seuil atteint dès le premier projet sérieux.
Modèles IA supportés
Cursor donne accès à GPT-4o, Claude 3.5 Sonnet, Claude 3.7 Sonnet, Gemini 1.5 Pro et des modèles locaux via Ollama. En pratique, Claude 3.5 Sonnet donne les meilleurs résultats sur le code TypeScript/React — meilleure compréhension des types complexes et moins d'hallucinations sur les APIs Next.js récentes.
Installer Cursor et ouvrir Onyx
Étape 1 — Télécharger Cursor
Rendez-vous sur cursor.sh et téléchargez la version macOS, Windows ou Linux. L'installation prend moins de 2 minutes. Cursor importe automatiquement les extensions VS Code installées — aucune configuration manuelle requise.
Étape 2 — Cloner Onyx
Ouvrez un terminal et clonez le template :
git clone https://github.com/benchambolle/onyx mon-projet
cd mon-projet
npm install
Le template Onyx fournit d'emblée : Next.js 15, TypeScript strict, Tailwind CSS v4, shadcn/ui, système de blog MDX, SEO automatique et scores Lighthouse entre 95 et 100. Consultez la documentation Onyx pour la liste complète des fonctionnalités incluses.
Étape 3 — Ouvrir le projet dans Cursor
cursor .
Ou lancez Cursor, faites File > Open Folder et sélectionnez le dossier cloné. Cursor analyse la structure du projet au premier chargement — comptez 10 à 30 secondes selon la taille de la codebase.
Le fichier .cursorrules (ou CLAUDE.md)
Cursor lit automatiquement le fichier .cursorrules à la racine du projet, s'il existe. Ce fichier contient des instructions persistantes pour l'IA : conventions de code, architecture du projet, règles à respecter.
Onyx inclut un fichier CLAUDE.md qui documente toute l'architecture. Cursor l'ingère comme contexte permanent — toutes les réponses tiennent compte des conventions du projet sans avoir à les répéter à chaque prompt.
Les 3 fonctionnalités Cursor à maîtriser
1. Cmd+K — Modifier le code sélectionné par instruction
Sélectionnez n'importe quel bloc de code, appuyez sur Cmd+K (Mac) ou Ctrl+K (Windows/Linux), tapez une instruction en langage naturel, et Cursor modifie le code sélectionné.
Cmd+K est chirurgical : Cursor modifie uniquement ce qui est sélectionné, sans toucher au reste du fichier. Résultat : zéro régression accidentelle sur le code adjacent.
Exemples d'instructions Cmd+K :
"Ajoute la validation Zod sur ce formulaire""Convertis cette fonction en async/await""Ajoute les types TypeScript manquants""Optimise ce composant pour éviter les re-renders inutiles"
2. Chat Cmd+L — Interroger la codebase entière
Cmd+L ouvre le panneau de chat latéral. Cursor a accès à l'ensemble du projet — posez des questions précises sur n'importe quel fichier ou comportement.
La différence avec ChatGPT : le chat Cursor connaît votre code. Demandez "Où est définie la couleur primaire ?" — Cursor pointe vers les variables OKLCH dans globals.css. Demandez "Comment ajouter une nouvelle catégorie de blog ?" — Cursor lit site.config.ts et explique la procédure exacte.
Utilisations typiques du chat :
- Comprendre une partie inconnue de la codebase
- Débogage : coller un message d'erreur et demander la cause
- Planifier une fonctionnalité avant de coder
- Générer du code dans un nouveau fichier
3. Autocomplete — Génération de composants complets
L'autocomplete de Cursor va au-delà de la complétion de ligne. Commencez à taper un composant React — Cursor génère la structure complète : props typées, état, JSX, classes Tailwind cohérentes avec le projet.
Sur un projet Onyx, l'autocomplete connaît les composants shadcn/ui disponibles, les icônes Lucide, les conventions Framer Motion et les patterns d'import utilisés dans le projet. La complétion est contextuelle, pas générique.
Prompts efficaces pour modifier Onyx avec Cursor
La qualité du prompt détermine la qualité du résultat. Voici des formulations testées sur Onyx qui donnent des résultats fiables et directs.
Modifier le hero
Cmd+K sur le composant Hero dans src/components/blocks/hero.tsx :
"Ajoute un champ email avec validation et un bouton de soumission.
Le champ doit avoir un placeholder 'Votre email professionnel'.
Utilise react-hook-form et zod pour la validation.
Style cohérent avec les composants shadcn/ui existants."
Ajouter une section témoignages
Chat (Cmd+L) :
"Crée un composant Testimonials dans src/components/blocks/.
Le composant affiche 3 témoignages avec nom, photo (Avatar shadcn/ui),
texte et étoiles. Animation whileInView avec Framer Motion,
viewport once: true. Props typées avec une interface TypeScript exportée."
Changer la couleur primaire
Cmd+K sur les variables dans src/app/globals.css :
"Change la couleur primaire en oklch(0.7 0.15 280).
Mets à jour --primary dans :root ET dans .dark."
Traduire le contenu de home.ts
Cmd+K sur src/data/home.ts :
"Traduis tous les textes en anglais.
Garde les clés d'objet identiques.
Garde les chemins d'image et les URLs inchangés."
Ajouter un lien dans la navigation
Chat (Cmd+L) :
"Comment ajouter 'Services' dans la navigation principale ?
Je veux qu'il apparaisse entre 'Accueil' et 'Blog'."
Cursor lit site.config.ts et indique exactement où modifier le tableau navigation.main — sans fouiller manuellement dans la configuration.
Modifier site.config.ts avec Cursor
site.config.ts est le fichier central d'Onyx. Toutes les informations du site — identité, navigation, SEO, analytics, réseaux sociaux, mentions légales — passent par ce fichier.
Workflow recommandé
- Ouvrez
site.config.tsdans Cursor - Sélectionnez la section à modifier (ex. : les informations de contact)
- Appuyez sur
Cmd+K - Tapez l'instruction précise :
"Remplace les informations de contact : nom 'Dupont Conseil', email 'contact@dupont-conseil.fr', téléphone '+33 1 23 45 67 89'" - Cursor modifie uniquement la sélection — les 200 autres lignes du fichier restent intactes
Exemple — Configurer le SEO
Cmd+K sur la section seo de site.config.ts :
"Met à jour le SEO : title 'Dupont Conseil — Expert-comptable Paris',
description '...', url 'https://dupont-conseil.fr'.
Garde le format TypeScript existant."
Le résultat est immédiat, proprement typé, et respecte l'interface SiteConfig définie dans src/types/config.ts.
Cursor vs GitHub Copilot pour Next.js
| Critère | Cursor Pro (20 $/mois) | GitHub Copilot (10 $/mois) |
|---|---|---|
| Contexte codebase | Codebase entière indexée | Fichier ouvert uniquement |
| Chat | Oui, avec contexte projet | Oui, sans contexte global |
| Cmd+K | Oui — modification par sélection | Non |
| Autocomplete | Contextuel (connaît le projet) | Générique (basé sur le fichier) |
| Modèles IA | GPT-4o, Claude 3.5/3.7, Gemini | GPT-4o exclusivement |
| Compréhension TypeScript | Excellente sur types complexes | Bonne |
| Prix | 20 $/mois (Pro) | 10 $/mois |
Pour un projet Next.js avec une architecture structurée comme Onyx, Cursor gagne sur tous les critères qui comptent : le contexte codebase transforme radicalement la pertinence des réponses. Le surcoût de 10 $/mois se récupère en moins d'une heure de développement économisé.
Les limites de Cursor pour le développement web
Cursor accélère massivement le développement — mais l'outil commet des erreurs prévisibles. Les connaître évite de déployer du code cassé en production.
Erreurs sur les types TypeScript complexes
Cursor génère parfois des types incorrects sur les génériques imbriqués ou les utility types avancés (ReturnType, Parameters, Awaited). Vérifiez systématiquement les types générés avec npm run build — les erreurs TypeScript apparaissent au build, pas toujours dans l'éditeur.
Hallucinations sur les APIs Next.js récentes
Next.js 15 a introduit des changements importants sur les Server Actions, le cache par défaut (no-store au lieu de force-cache) et les params asynchrones dans les layouts. Cursor génère parfois du code valide pour Next.js 14 mais incorrect pour Next.js 15. Contrôlez toujours les imports et les signatures de fonctions sur la documentation officielle Next.js.
Régression sur les fichiers de configuration
Cmd+K sur un fichier complexe comme globals.css ou tailwind.config.ts peut écraser des règles custom non sélectionnées si la sélection est imprécise. Règle pratique : sélectionnez toujours plus large que nécessaire, et relisez le diff avant d'accepter.
Limites du plan Hobby
2 000 complétions par mois s'épuisent vite sur un projet actif. À partir de 2 à 3 semaines de développement intensif, le plan Pro à 20 $/mois devient inévitable.
Conclusion — Cursor + Onyx : le workflow qui tient en production
Cursor ne remplace pas la compréhension du code — Cursor amplifie la vitesse d'exécution d'un développeur qui comprend ce qu'il fait. Sur un projet Next.js structuré, l'outil réduit de 60 à 70 % le temps passé sur les tâches répétitives : modifier des composants, configurer des sections, adapter des styles.
Le template Onyx est conçu pour ce workflow : architecture claire, configuration centralisée dans site.config.ts, conventions documentées dans CLAUDE.md. Cursor lit ce contexte et répond avec précision dès le premier prompt.
Pour aller plus loin :
- Installer Onyx en 5 minutes — point de départ avant d'ouvrir Cursor
- Documentation Onyx — architecture complète, composants disponibles, options de configuration
- Guide complet création de site web avec l'IA en 2026 — workflow complet de v0 à Vercel, avec Cursor et Claude Code
