Initialiser un projet Next.js pour un site vitrine ou un blog

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

Introduction

Tu as choisi de construire un site vitrine ou un blog — quelque chose que Google peut indexer, avec des pages, du contenu, une navigation claire.

Si tu n'as pas encore lu l'article sur Cursor et le terminal, commence par là : la configuration du terminal intégré et les bases de npm/npx sont les prérequis.

Ici, la logique est la même que pour React + Vite : tu lances une commande qui crée un projet complet, tu installes les dépendances si besoin, tu démarres un serveur local.

La différence : cette fois tu vises un site de contenu pensé pour le SEO, pas une application interactive.

1. Créer un dossier de travail et l'ouvrir dans Cursor

Comme pour React + Vite, tu peux créer un dossier dédié à ton projet :

mkdir mon-site-next
cd mon-site-next

Ensuite, tu ouvres ce dossier dans Cursor :

• File → Open Folder et tu choisis mon-site-next ;
• ou la commande cursor . si elle est configurée chez toi.

Encore une fois, l'idée : Cursor doit être ouvert à la racine de ton projet pour bien comprendre le contexte.

2. Créer le projet avec create-next-app

Next fournit un outil officiel qui crée pour toi un projet complet, avec une structure de pages prête à l'emploi.

Dans le terminal (ou le terminal intégré de Cursor), lance :

npx create-next-app@latest

L'outil va te poser une série de questions. Tu peux les voir comme des "préférences de setup", pas comme des choix définitifs gravés dans le marbre.

Tu verras des questions du style (les libellés exacts peuvent légèrement changer avec le temps) :

1. Project name Donne un nom à ton projet (par exemple mon-site-next). Ça créera un dossier avec ce nom.

2. TypeScript ? Si tu débutes complètement, tu peux dire non. Si tu es ok pour un peu plus de structure et des messages d'erreur plus explicites, tu peux dire oui. Dans tous les cas, Next fonctionne bien dans les deux modes.

3. ESLint ? Tu peux dire oui sans hésiter : c'est juste un outil qui aide à garder un code propre.

4. Tailwind CSS ? Tu peux répondre oui ou non selon ton envie. Si tu prévois plus tard d'utiliser des composants UI type shadcn, c'est souvent un plus d'avoir Tailwind activé dès le départ.

5. Other options (src directory, app router, etc.) Tu peux généralement accepter les options par défaut. L'important pour toi, ce n'est pas de maîtriser chaque détail, c'est d'obtenir une structure standard que Cursor saura manipuler.

À la fin, l'outil t'indiquera les commandes à lancer pour démarrer ton projet.

3. Aller dans le dossier du projet

Si create-next-app a créé un dossier mon-site-next, place-toi dedans :

cd mon-site-next

Ensuite, selon la version de l'outil, les dépendances ont souvent déjà été installées pour toi. Si ce n'est pas le cas, tu peux lancer :

npm install

Comme pour React + Vite, npm install lit le fichier package.json et installe toutes les briques nécessaires. Tu peux continuer à considérer ce fichier comme la "liste de courses" de ton projet.

4. Démarrer le serveur local Next

Pour lancer ton site en mode développement, tu utilises :

npm run dev

Par défaut, Next va démarrer sur :

http://localhost:3000/

Tu ouvres cette URL dans ton navigateur et tu verras la page d'accueil par défaut de Next. À ce stade, tu as :

• un site Next fonctionnel ;
• un serveur local qui tourne ;
• une structure de pages que Cursor peut t'aider à modifier.

5. Comprendre juste ce qu'il faut de la structure Next

Tu n'as pas besoin de tout retenir, mais il y a deux idées simples qui t'aident à naviguer :

• les fichiers dans le dossier des pages (ou de l'app) deviennent des routes Un fichier page.tsx ou page.jsx correspond à une page de ton site.
• la structure des dossiers correspond souvent à la structure des URLs Un sous-dossier blog avec un fichier page.tsx à l'intérieur → une URL /blog.

Dès que tu as un doute, tu peux demander à Cursor :

"Explique-moi comment sont structurées les pages dans ce projet Next, comme si j'étais un débutant qui vient de lancer create-next-app."

6. Premier prompt Cursor : transformer le template en site vitrine

Plutôt que de tout supprimer, tu peux partir du template existant et le remodeler avec Cursor.

Quelques exemples de choses à lui demander :

• Remplacer la page d'accueil par une vraie landing page pour ton produit / ta boîte : titre, sous-titre, section "bénéfices", section "comment ça marche".
• Créer une page "À propos" simple, avec ton histoire / celle de ton entreprise.
• Ajouter une page "Blog" avec une liste d'articles fictifs (on les branchera plus tard sur une base SQL pour gérer ça proprement).

L'idée n'est pas encore de gérer de vraies données. On est dans une phase "maquette fonctionnelle" : tu vois ton site, tu navigues entre les pages, et tu prends confiance.

C'est aussi à ce stade que tu peux commencer à teaser du design plus propre :

• demander à Cursor de structurer le code pour pouvoir plus tard intégrer des composants UI type shadcn ;
• ou lui dire explicitement : "garde une structure simple, on ajoutera un design system dans un second temps."

Objectif atteint : tu sais init un projet Next, le lancer en local, et parler à Cursor pour transformer le template de base en vrai site vitrine + blog.

Suite de la série

Tu as choisi l'autre stack ? → Initialiser un projet React + Vite pour une application ou un outil interne.

Ton projet tourne en local ? → Les bonnes pratiques de vibe coding avec Cursor pour apprendre à parler à l'IA sans tout casser.