Créer un projet Next.js avec Cursor

Il est temps de créer ton premier projet Next.js ! Nous allons utiliser Cursor et l'IA pour accélérer le processus.

Qu'est-ce que Next.js ?

Next.js est un framework React pour construire des applications web. La documentation officielle de React (react.dev) le cite en premier parmi les frameworks recommandés pour les nouvelles applications.

Pourquoi Next.js ?

• Rapide - rendu côté serveur (SSR)
• Facile - routage, routes API, styles prêts à l'emploi
• SEO - excellent pour les moteurs de recherche
• Hot Reload (dans la documentation : Fast Refresh) - les changements visibles instantanément
• Utilisé par - entre autres Nike, OpenAI et Sonos (galerie nextjs.org/showcase)

Utiliser l'IA pour configurer le projet

Au lieu de chercher sur Google « comment créer un projet Next.js », nous allons demander à l'IA dans Cursor !

Étape 1 : Ouvrir le chat IA

Dans Cursor, appuie sur : Cmd/Ctrl + L

Étape 2 : Demander à l'IA

Tape exactement ce prompt :

1Comment créer un nouveau projet Next.js avec TypeScript et Tailwind CSS ? Donne-moi la commande npx exacte.

Étape 3 : Copier la commande

L'IA va te donner une commande semblable à :

1npx create-next-app@latest krakens-call

Parfois l'IA ajoute des options, par exemple --typescript --tailwind --app. Cette commande marche aussi : l'installateur ne pose alors aucune question et utilise les réglages recommandés pour tout le reste.

Étape 4 : Exécuter dans le terminal

1. Ouvre le terminal (Ctrl + `)
2. Assure-toi d'être dans le dossier où tu veux créer le projet
3. Colle la commande et appuie sur Entrée

Étape 5 : Répondre aux questions de l'installateur

L'installateur demande d'abord s'il doit utiliser les réglages recommandés :

1Would you like to use the recommended Next.js defaults?
2  Yes, use recommended defaults - TypeScript, ESLint, Tailwind CSS, App Router, AGENTS.md
3  No, customize settings - Choose your own preferences

Choisis Yes, use recommended defaults (flèches et Entrée). Tu obtiens exactement ce qu'il nous faut : TypeScript, ESLint, Tailwind CSS et App Router (le plus important !), plus un fichier AGENTS.md avec des instructions pour les assistants IA.

Si tu choisis No, customize settings, l'installateur pose une question par option. Réponds alors ainsi :

• TypeScript : Yes
• linter : ESLint
• React Compiler : No
• Tailwind CSS : Yes
• dossier src/ : No
• App Router : Yes (le plus important !)
• alias d'import : No
• AGENTS.md : Yes

Étape 6 : Attendre (~1-2 minutes)

npm va télécharger tous les paquets. Tu verras :

1Creating a new Next.js app in /path/to/krakens-call.
2
3Installing packages. This might take a couple of minutes.
4
5Success! Created krakens-call at /path/to/krakens-call

Ouvrir le projet dans Cursor

Méthode 1 : Via le terminal

1cd krakens-call
2cursor .

(cursor . ouvre Cursor dans le dossier courant. Si le terminal ne connaît pas la commande cursor, ouvre la palette de commandes de Cursor avec Cmd/Ctrl + Shift + P, tape « install cursor » et lance la commande qui installe cursor. La commande code . ouvre Visual Studio Code, pas Cursor.)

Méthode 2 : Via Cursor

1. File → Open Folder
2. Sélectionne le dossier krakens-call
3. Clique sur « Open »

Structure d'un projet Next.js 16

Quand tu ouvres le projet, tu verras cette structure :

1krakens-call/
2├── app/                  ← Dossier principal de l'application (App Router)
3│   ├── favicon.ico      ← Icône du site
4│   ├── globals.css      ← Styles CSS globaux (avec @import "tailwindcss")
5│   ├── layout.tsx       ← Layout (enveloppe) pour toutes les pages
6│   └── page.tsx         ← Page d'accueil (/)
7├── public/              ← Fichiers statiques (images, polices)
8├── node_modules/        ← Paquets installés (ne pas commiter !)
9├── AGENTS.md            ← Instructions pour les assistants IA (CLAUDE.md y renvoie)
10├── eslint.config.mjs    ← Configuration ESLint
11├── next.config.ts       ← Configuration Next.js
12├── package.json         ← Dépendances et scripts
13├── postcss.config.mjs   ← Branche Tailwind CSS
14├── tsconfig.json        ← Configuration TypeScript
15└── .gitignore           ← Fichiers ignorés par Git

Les fichiers les plus importants :

1. app/page.tsx - Page d'accueil

C'est la page d'accueil de ton application (/). Chaque fichier page.tsx dans le dossier app/ est une page distincte.

2. app/layout.tsx - Layout principal

C'est l'enveloppe de toutes les pages - les éléments partagés (par ex. header, footer).

3. app/globals.css - Styles globaux

Styles CSS appliqués à toute l'application.

4. package.json - Dépendances

Liste de toutes les bibliothèques + scripts npm.

5. postcss.config.mjs - Tailwind CSS

Branche Tailwind sur le projet. Tailwind 4 n'a plus de fichier tailwind.config.ts : les couleurs et les polices se règlent dans app/globals.css.

Lancer le projet

Il est temps de voir le projet en action !

Étape 1 : Installer les dépendances (si ce n'est pas déjà fait)

1npm install

Étape 2 : Démarrer le serveur de développement

1npm run dev

Tu verras :

1▲ Next.js 16.3.8 (Turbopack)
2- Local:         http://localhost:3000
3- Network:       http://192.168.1.10:3000
4
5✓ Ready in 2.5s

Étape 3 : Ouvrir dans le navigateur

Va sur : http://localhost:3000

Tu verras la page par défaut de Next.js !

Hot Reload - La magie de Next.js

Hot Reload signifie que les changements dans le code sont visibles instantanément dans le navigateur, sans rafraîchir ! Dans la documentation de Next.js, cette fonction s'appelle Fast Refresh.

Essaie :

1. Ouvre app/page.tsx dans Cursor
2. Trouve le texte « To get started, edit the page.tsx file. »
3. Change-le en « Ahoy, Pirates! »
4. Enregistre le fichier (Cmd/Ctrl + S)
5. Regarde le navigateur - le changement apparaîtra automatiquement !

Cela signifie que tu peux coder et voir les résultats immédiatement. Super pratique !

App Router vs Pages Router

Next.js possède deux versions de routage :

Nous utilisons App Router - Next.js le recommande pour les nouveaux projets depuis la version 13.4.

Résumé

Next.js - framework React pour construire des applications npx create-next-app - crée un nouveau projet App Router - dossier app/ avec le routage page.tsx - page individuelle layout.tsx - layout partagé npm run dev - démarre le serveur de développement Hot Reload - changements visibles instantanément localhost:3000 - adresse locale de l'application

Dans le prochain exercice, tu apprendras Tailwind CSS et nous créerons une landing page !

À tout de suite !

1// Next.js 16 App Router - Structure de page de base
2
3export default function Home() {
4  return (
5    <main className="min-h-screen p-24">
6      <div className="max-w-5xl mx-auto">
7        <h1 className="text-4xl font-bold mb-8">
8          Bienvenue dans Next.js 16 !
9        </h1>
10
11        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
12          <div className="border border-gray-300 p-6 rounded-lg">
13            <h2 className="text-2xl font-semibold mb-4">
14              App Router
15            </h2>
16            <p className="text-gray-600">
17              Ceci est une page dans le dossier app/. Chaque fichier page.tsx est une page distincte.
18            </p>
19          </div>
20
21          <div className="border border-gray-300 p-6 rounded-lg">
22            <h2 className="text-2xl font-semibold mb-4">
23              Server Components
24            </h2>
25            <p className="text-gray-600">
26              Par défaut, tous les composants de l'App Router sont des Server Components.
27            </p>
28          </div>
29
30          <div className="border border-gray-300 p-6 rounded-lg">
31            <h2 className="text-2xl font-semibold mb-4">
32              TypeScript
33            </h2>
34            <p className="text-gray-600">
35              Next.js intègre le support de TypeScript out-of-the-box.
36            </p>
37          </div>
38
39          <div className="border border-gray-300 p-6 rounded-lg">
40            <h2 className="text-2xl font-semibold mb-4">
41              Tailwind CSS
42            </h2>
43            <p className="text-gray-600">
44              Stylisation via des classes utilitaires directement dans le JSX.
45            </p>
46          </div>
47        </div>
48      </div>
49    </main>
50  );
51}