Démarrer un projet Next.js 15 moderne

Initialise ton projet Next.js 15 avec toutes les options modernes et découvre l’architecture de base.

1 mai 2025

2 min read

Dans ce premier module, nous allons :

Initialiser un projet Next.js 15 à la pointe du framework.
Activer TypeScript, ESLint, Tailwind CSS, App Router et Turbopack par défaut.
Découvrir l’architecture de base générée par Next.js (dossier app/, layout.tsx, page.tsx).
Exécuter l’application en local pour valider l’environnement.
Mettre en place Prisma pour la connexion à une base de données.

Pense à installer la dernière version de Node.js (>= 16) et Git avant de commencer.

Next.js 15 marque une étape majeure :

Les React Server Components deviennent le cœur du rendu, offrant un découplage net entre logique serveur et client.
Les Server Actions permettent de traiter les formulaires et les mutations directement sur le serveur, sans API REST ou GraphQL.
La prise en charge native de TypeScript, ESLint et Tailwind CSS simplifie la configuration.
Turbopack, remplaçant Webpack à terme, accélère drastiquement le rechargement en développement.

Avec ces briques, vous réalisez des apps full-stack performantes tout en profitant d’une expérience développeur fluide.

Cloner ou créer le dossier du projet.
Lancer la commande d’initialisation :
Terminal
```
1npm create next-app@latest movies-speaker
```
Choisir les options modernes : TypeScript, ESLint, Tailwind CSS, App Router, Turbopack.
Explorer l’arborescence générée :
- app/layout.tsx pour la structure globale (<html>, <body>, navigation).
- app/page.tsx pour la page d’accueil (React Server Component).
- globals.css pour les styles et le dark mode.
Démarrer le serveur de développement et ouvrir [http://localhost:3000].
Installer et configurer Prisma :
- npx prisma init
- Choisir SQLite pour un setup rapide.
- Définir le modèle User dans schema.prisma.
- Générer la migration et créer la base locale.

À l’issue de ce module, vous comprendrez comment Next.js 15 structure :

Les Server Components (fichiers page.tsx avec logique async).
Les Client Components ('use client' pour les interactions riches).
La séparation du code côté serveur (app/server/…) et du code UI (app/components/…).
L’intégration de Prisma pour la persistance des données.