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.

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

  1. Cloner ou créer le dossier du projet.
  2. Lancer la commande d’initialisation :
    Terminal
    1
    npm create next-app@latest movies-speaker
  3. Choisir les options modernes : TypeScript, ESLint, Tailwind CSS, App Router, Turbopack.
  4. 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.
  5. Démarrer le serveur de développement et ouvrir [http://localhost:3000].
  6. 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.

Architecture de base

À 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.

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).