Ce Que Vous Allez Créer en 30 Minutes
Vous souvenez-vous quand monter un projet full-stack depuis zéro signifiait un après-midi entier de boilerplate, de fichiers de configuration et d'onglets Stack Overflow ? Ces jours sont révolus.
Cursor — l'éditeur de code AI-first qui a connu une croissance de 56 % de ses utilisateurs fin 2025 — vous permet de passer d'un dossier vide à une application déployée en le temps d'un épisode de série. Dans ce tutoriel, vous ferez exactement cela : créer une application de gestion de tâches complète avec une interface soignée, une API REST et une base de données en moins de 30 minutes.
Aucune expérience préalable avec Cursor n'est nécessaire. Suivez simplement les étapes.
- Temps Requis : ~30 minutes
- Difficulté : Débutant à Intermédiaire
- Stack Technique : Next.js 15, Tailwind CSS, SQLite (via Prisma)
- Ce Que Vous Créerez : Gestionnaire de tâches full-stack avec opérations CRUD
- Prérequis : Node.js 18+, connaissances de base en JavaScript/TypeScript
- Plan Cursor : La version gratuite fonctionne (Pro recommandé pour la meilleure expérience)
À la fin, vous aurez une application fonctionnelle et complète — ainsi qu'une compréhension solide de l'utilisation de l'Agent Mode de Cursor pour construire n'importe quoi plus rapidement.
Concepts Clés : Ce Qui Rend Cursor Différent
Avant de commencer à construire, passons rapidement en revue les fonctionnalités de Cursor que nous utiliserons tout au long de ce tutoriel.
Cursor est un éditeur de code AI-first construit comme un fork de VS Code. L'interface est familière, mais l'IA est profondément intégrée dans chaque aspect du workflow de développement. Avec le lancement de Cursor 2.0 et son nouveau modèle Composer — un modèle conçu spécifiquement pour la programmation qui tourne à 250 tokens/seconde, 4 fois plus rapide que les modèles comparables — le développement assisté par IA a atteint un nouveau niveau de vitesse et de fiabilité.
Agent Mode — La vedette de ce tutoriel. L'Agent Mode navigue de manière autonome dans votre code, crée et modifie plusieurs fichiers, exécute des commandes terminal et vérifie que les modifications fonctionnent. Considérez-le comme un partenaire de code infatigable qui comprend l'ensemble de votre projet.
Tab Completion — Auto-complétion intelligente qui prédit des modifications multi-lignes basées sur vos changements récents et les erreurs du linter. Appuyez sur Tab pour accepter, Esc pour ignorer, ou Ctrl/⌘ + → pour accepter mot par mot.
Cursor Rules — Des instructions persistantes (stockées dans .cursor/rules/ sous forme de fichiers .mdc) qui indiquent à l'IA vos conventions de codage, bibliothèques préférées et patterns de projet.
Ces concepts en tête, préparons l'environnement.
Préparation : Configuration de l'Environnement
La préparation prend environ 5 minutes. Ensuite, nous lançons le chronomètre.
Rendez-vous sur cursor.com et téléchargez la dernière version pour votre système d'exploitation (macOS, Windows ou Linux). L'installation est simple — si vous avez déjà installé VS Code, c'est identique.
Une fois installé, lancez Cursor. Si vous venez de VS Code, vous pouvez importer vos extensions et paramètres existants lors de l'assistant de configuration initial.
Inscrivez-vous gratuitement ou connectez-vous. Le plan gratuit Hobby inclut des requêtes IA limitées — suffisantes pour ce tutoriel. Si vous prévoyez d'utiliser Cursor régulièrement, le plan Pro (20 $/mois) offre environ 225 requêtes Sonnet par mois.
Vous bénéficiez de 14 jours d'essai gratuit Pro lors de votre première inscription. Parfait pour suivre ce tutoriel.
Ouvrez le terminal intégré de Cursor (Ctrl/⌘ + ~) et vérifiez la version de Node.js :
node --version # Devrait être v18.0.0 ou supérieur
npm --version # Devrait être v9.0.0 ou supérieur
Si Node.js n'est pas installé, téléchargez-le depuis nodejs.org. Nous recommandons la version LTS.
Créez et ouvrez un nouveau dossier :
mkdir cursor-task-app && cd cursor-task-app
Puis ouvrez-le dans Cursor : File → Open Folder ou exécutez cursor . dans le terminal.
L'environnement est prêt. Commençons à construire.
Étape par Étape : Créer l'App Full-Stack
Voici le cœur du tutoriel. Nous utiliserons l'Agent Mode de Cursor pour créer une application de gestion de tâches avec Next.js, Tailwind CSS et une base de données SQLite. Chaque étape suit un schéma simple : donnez à l'Agent un prompt clair, observez son travail et vérifiez le résultat.
Étape 1 : Initialiser le Projet avec l'Agent Mode
Ouvrez le panneau Chat avec ⌘+L (Mac) ou Ctrl+L (Windows/Linux). Assurez-vous que le mode Agent est sélectionné dans le menu déroulant en haut du panneau.
Saisissez le prompt suivant :
Create a new Next.js 15 project with TypeScript, Tailwind CSS, and the App Router.
Use `npx create-next-app@latest .` with these options:
- TypeScript: Yes
- ESLint: Yes
- Tailwind CSS: Yes
- src/ directory: Yes
- App Router: Yes
- Import alias: @/*
After creating the project, verify it works by running the dev server.
L'Agent Mode va :
- Exécuter la commande
create-next-appdans votre terminal - Sélectionner automatiquement les bonnes options
- Démarrer le serveur de développement pour vérifier que tout fonctionne
La première fois que l'Agent Mode essaie d'exécuter une commande terminal, Cursor demandera votre autorisation. Cliquez sur « Allow » pour permettre à l'Agent d'exécuter des commandes. Vous pouvez également activer l'exécution automatique pour les commandes de confiance dans les Paramètres.
Résultat attendu : Un projet Next.js tout neuf fonctionnant sur http://localhost:3000 avec la page d'accueil par défaut.
Étape 2 : Configurer les Cursor Rules
Avant de générer plus de code, informons Cursor de nos conventions de projet. Cette étape prend 30 secondes mais améliore considérablement la qualité du résultat.
Donnez à l'Agent ce prompt :
Create a .cursor/rules/project.mdc file with these project rules:
- Use TypeScript with strict types, avoid `any`
- Use Next.js App Router conventions (server components by default)
- Style with Tailwind CSS utility classes, no custom CSS
- Use Prisma for database access
- Keep components small and focused (under 100 lines)
- Use descriptive variable names
- Add error handling to all async operations
Étape 3 : Construire l'Interface avec l'Agent Mode
Maintenant, la partie amusante — créer l'interface de gestion de tâches :
Build a task management UI with these requirements:
1. A main page at src/app/page.tsx that shows:
- A header with the app title "TaskFlow"
- An input field to add new tasks
- A list of tasks, each showing:
- Task title
- Completion status (checkbox)
- Delete button
- Filter buttons: All, Active, Completed
2. Create a reusable TaskItem component at src/components/task-item.tsx
3. Use a clean, modern design with Tailwind CSS:
- Centered layout, max-width 2xl
- Subtle shadows and rounded corners
- Smooth hover transitions
- Responsive on mobile
For now, use local state (useState) to manage tasks. We'll add the database later.
Observez l'Agent Mode créer simultanément plusieurs fichiers — le composant de page, le composant TaskItem et les définitions de types nécessaires.
Résultat attendu : Une interface de gestion de tâches fonctionnelle sur http://localhost:3000.
Étape 4 : Ajouter la Base de Données avec Prisma
Il est temps de rendre les données persistantes :
Add a SQLite database using Prisma:
1. Install Prisma and initialize it with SQLite
2. Create a Task model in prisma/schema.prisma with fields:
- id (String, cuid)
- title (String)
- completed (Boolean, default false)
- createdAt (DateTime, default now)
- updatedAt (DateTime, auto-update)
3. Run prisma generate and prisma db push
4. Create a Prisma client singleton at src/lib/prisma.ts
SQLite est parfait pour les tutoriels et les prototypes — zéro configuration, pas de serveur de base de données externe nécessaire. Pour la production, il suffit de modifier une ligne dans le schéma Prisma pour passer à PostgreSQL.
Étape 5 : Créer les Routes API
Connectons le backend :
Create Next.js API routes for task CRUD operations:
1. GET /api/tasks - Fetch all tasks (sorted by createdAt desc)
2. POST /api/tasks - Create a new task (body: { title: string })
3. PATCH /api/tasks/[id] - Toggle task completion
4. DELETE /api/tasks/[id] - Delete a task
Use the Prisma client from src/lib/prisma.ts.
Add proper error handling and input validation.
Return appropriate HTTP status codes.
Étape 6 : Connecter le Frontend à l'API
La dernière étape de code — connecter l'interface au vrai backend :
Update the task management page to use the API routes instead of local state:
1. Fetch tasks from GET /api/tasks on page load
2. Add new tasks via POST /api/tasks
3. Toggle completion via PATCH /api/tasks/[id]
4. Delete tasks via DELETE /api/tasks/[id]
Use React hooks (useState, useEffect) and add loading states.
Convert the page to a client component ("use client") since it needs interactivity.
Add optimistic updates for a snappy UX.
Résultat attendu : Un gestionnaire de tâches entièrement fonctionnel avec une vraie base de données. Ajoutez une tâche, rafraîchissez la page — elle persiste.
- Next.js 15 avec App Router
- TypeScript de bout en bout
- Stylisation Tailwind CSS
- Base de données SQLite via Prisma
- Routes API RESTful
- Interface moderne et responsive
- Configuration du projet : ~3 min
- Cursor Rules : ~1 min
- Composants UI : ~5 min
- Configuration de la base : ~3 min
- Routes API : ~5 min
- Intégration frontend : ~5 min
- Total : ~22 minutes
Pas mal pour une application full-stack complète. Voyons maintenant des techniques pour optimiser davantage votre workflow avec Cursor.
Astuces Pro : Tirer le Meilleur de Cursor
Ajoutez la documentation de votre framework à Cursor : allez dans Settings → Features → Docs et ajoutez des URLs comme https://nextjs.org/docs. Puis référencez-les dans vos prompts avec @docs pour une génération de code plus précise.
Quand votre projet grandit, aidez l'Agent à comprendre le contexte en référençant des fichiers spécifiques avec @. Cursor lit le contenu du fichier avant de répondre.
Visitez cursor.directory pour des modèles de règles de la communauté. Il existe des règles prêtes à l'emploi pour React, Next.js, Python, Go et des dizaines d'autres stacks.
L'Agent Mode excelle dans le refactoring cross-file. L'Agent scanne tous les fichiers, effectue des modifications cohérentes et vérifie que rien ne casse.
Problèmes Courants et Solutions
| Problème | Solution |
|---|---|
| L'Agent génère du code avec des bugs | Soyez plus précis dans votre prompt. Incluez le comportement attendu et les cas limites. Découpez les tâches complexes en étapes plus petites. |
| L'Agent Mode est bloqué ou lent | Vérifiez votre connexion. Avec le plan gratuit, vous avez peut-être atteint la limite. Essayez de changer de modèle IA dans les paramètres. |
| Le code ne correspond pas au style du projet | Configurez les Cursor Rules (.cursor/rules/) avant de générer du code. Utilisez /Generate Cursor Rules pour créer des règles automatiquement. |
| Les commandes terminal échouent | Vérifiez les autorisations du terminal et que Node.js/npm sont correctement installés. |
| Erreurs de base de données après modification du schéma | Exécutez npx prisma db push pour synchroniser. En développement, supprimez prisma/dev.db et refaites un push. |
| Erreurs « use client » | L'App Router de Next.js utilise les Server Components par défaut. Ajoutez "use client" en haut des composants qui utilisent des hooks. |
Traitez l'Agent Mode comme un développeur junior talentueux. Relisez toujours le code généré avant de commiter. Il est rapide et capable, mais pas infaillible — surtout pour le code sensible comme l'authentification et la validation des données.
FAQ
Puis-je créer une app full-stack avec Cursor gratuitement ?
Oui. Le plan gratuit Hobby inclut des requêtes limitées, suffisantes pour ce tutoriel. Pour une utilisation plus intensive, le Pro coûte 20 $/mois avec ~225 requêtes Sonnet.
Quels langages Cursor prend-il en charge ?
Tous ceux supportés par VS Code : JavaScript, TypeScript, Python, Go, Rust, Java et bien d'autres.
Quelle est la différence entre Cursor et [GitHub Copilot](/fr/p/github-copilot-ai-code-assistant) ?
Cursor est un éditeur AI-first autonome avec Agent Mode intégré. GitHub Copilot est une extension pour les éditeurs existants. Cursor offre une intégration plus profonde et des workflows plus autonomes. Consultez notre article Cursor vs GitHub Copilot pour une comparaison détaillée.
L'Agent Mode fonctionne-t-il avec n'importe quel framework ?
Oui. Il est agnostique — React, Next.js, Vue, Svelte, Django, Rails, Express et tout autre framework.
Mon code est-il en sécurité avec Cursor ?
Cursor détient la certification SOC 2 Type II, utilise le chiffrement AES-256 au repos et TLS 1.2+ en transit. Avec le Privacy Mode activé, votre code n'est ni stocké ni utilisé pour l'entraînement.
Prochaines Étapes
Vous venez de créer une app full-stack en moins de 30 minutes. Voici ce que vous pouvez explorer ensuite :
- Ajouter l'authentification : Demandez à l'Agent d'intégrer NextAuth.js ou Clerk
- Déployer en production : Utilisez Vercel pour un déploiement en un clic
- Explorer d'autres outils : Consultez notre Meilleurs Outils de Codage IA en 2026 pour voir comment Cursor se compare à Windsurf et GitHub Copilot
- Parcourir les outils AI Coding : Visitez notre catégorie AI Coding
La conclusion : le développement assisté par IA ne remplace pas les développeurs — il élimine les parties fastidieuses pour que vous puissiez vous concentrer sur l'essentiel : concevoir des systèmes, résoudre des problèmes et livrer des produits plus rapidement.
Références
- Cursor Official Website — Fonctionnalités, tarifs et documentation
- Cursor 2.0 Changelog — Modèle Composer et architecture agent-first
- Cursor 2.0: Agent-First Architecture Complete Guide — Analyse approfondie
- The Perfect Cursor AI Setup for React and Next.js — Guide de configuration de Builder.io
- How to Use Cursor AI Agents — Tutoriel étape par étape
- Next.js Documentation — Documentation officielle
- Prisma Documentation — Documentation officielle
- Cursor Directory — Cursor Rules de la communauté
Cet article a été mis à jour pour la dernière fois en février 2026. Les fonctionnalités et tarifs de Cursor peuvent évoluer — visitez cursor.com pour les informations les plus récentes.
