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.
2 min read
Objectifs du module
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.
Tip
Pense à installer la dernière version de Node.js (>= 16) et Git avant de commencer.
Pourquoi Next.js 15 ?
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.
Plan de travail
- Cloner ou créer le dossier du projet.
- Lancer la commande d’initialisation :
Terminal1npm 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
dansschema.prisma
. - Générer la migration et créer la base locale.
Architecture de base
À l’issue de ce module, vous comprendrez comment Next.js 15 structure :
- Les Server Components (fichiers
page.tsx
avec logiqueasync
). - 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.
Prérequis
- Node.js ≥ 16 et npm/yarn.
- Un éditeur compatible (VS Code recommandé).
- Git pour versionner votre code.
- Un compte sur The Movie Database pour récupérer une clé API (pour la suite).