Initialisation et configuration Next.js 15

Crée un projet Next.js 15 avec TypeScript, Tailwind CSS et App Router.

4 min read

Accéder gratuitement à cette formation

Renseigne ton email pour débloquer immédiatement cette formation gratuite.

Dans cette première leçon, tu vas installer et configurer un projet Next.js 15 moderne. On y intégrera TypeScript, ESLint, Tailwind CSS et l’App Router, puis on créera une landing page minimale et on gérera une clé d’API via un fichier .env.

Prérequis

  • Node.js v18+ installé
  • npm ou Yarn
  • Compte et clé sur The Movie Database (TMDB) si tu souhaites tester l’API

1. Créer le projet Next.js 15

Lance la commande officielle pour générer un nouveau projet.
On accepte tous les choix par défaut : TypeScript, ESLint, Tailwind CSS, App Router, Turbopack.

Terminal
1
npx create-next-app@latest movies-speaker

Sélectionne :

  • TypeScript
  • ESLint
  • Tailwind CSS
  • Pas de répertoire src
  • App Router
  • Turbopack
  • Pas de personnalisation

2. Explorer la structure initiale

Une fois l’installation terminée :

Terminal
1
cd movies-speaker

2
code .

Tu devrais retrouver :

project structure
1
app/

2
├─ globals.css

3
├─ layout.tsx

4
└─ page.tsx

5
next.config.js

6
package.json

7
...
  • app/ : nouvelle convention App Router
  • globals.css : Tailwind CSS + reset
  • layout.tsx : balises <html> & <body> globales
  • page.tsx : page d’accueil par défaut

3. Démarrer le serveur de développement

On vérifie tout de suite que ça tourne :

Terminal
1
npm run dev

Ouvre ensuite http://localhost:3000 : tu dois voir la page Next.js par défaut.

4. Nettoyer et styliser la page d’accueil

4.1 Supprimer le contenu par défaut

Ouvre app/page.tsx et remplace le <main> complet par un titre minimal.

app/page.tsx
1
export default function Home() {

2
  return (

3
    <main className="flex justify-center items-center min-h-screen">

4
      <h1 className="text-5xl font-bold">Movies</h1>

5
    </main>

6
  )

7
}

4.2 Ajuster les styles globaux

Tu peux enrichir app/globals.css ou ajouter du CSS supplémentaire. Par exemple :

app/globals.css
1
body {

2
  @apply bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200;

3
  font-family: sans-serif;

4
}

Relance ton navigateur : ton titre Movies doit s’afficher centré avec ton style.

5. Gérer les variables d’environnement

Pour sécuriser ta clé TMDB, crée un fichier .env.local à la racine.

Terminal
1
touch .env.local

Ajoute-y :

.env.local
1
THE_MOVIE_DB_API_KEY=ton_token_secret_icI

6. Configurer next.config.js

Pour autoriser les images distantes (si tu veux charger les posters TMDB), édite next.config.js :

next.config.js
1
/** @type {import('next').NextConfig} */

2
const nextConfig = {

3
  images: {

4
    remotePatterns: [

5
      {

6
        protocol: 'https',

7
        hostname: 'image.tmdb.org',

8
        port: '',

9
        pathname: '/t/p/**',

10
      },

11
    ],

12
  },

13
};

14


15
export default nextConfig;

Relance le serveur :

Terminal
1
npm run dev

7. Créer un wrapper fetch côté serveur

Pour centraliser l’appel à TMDB, crée un dossier app/server et un fichier movies.ts :

app/server/movies.ts
1
'use server'

2


3
const API_KEY = process.env.THE_MOVIE_DB_API_KEY;

4
const BASE_URL = 'https://api.themoviedb.org/3';

5


6
export async function fetchMovieDb(path: string) {

7
  const res = await fetch(`${BASE_URL}${path}`, {

8
    headers: {

9
      accept: 'application/json',

10
      Authorization: `Bearer ${API_KEY}`,

11
    },

12
  });

13
  return res.json();

14
}

15


16
export async function getMovies() {

17
  const data = await fetchMovieDb('/movie/popular');

18
  return data.results; // sous-typé pour l’instant

19
}

Puis dans app/page.tsx tu peux importer et afficher des titres :

app/page.tsx
1
import { getMovies } from './server/movies';

2


3
export default async function Home() {

4
  const movies = await getMovies();

5


6
  return (

7
    <main>

8
      <h1 className="text-4xl">Movies</h1>

9
      <ul>

10
        {movies.slice(0, 5).map((m: any) => (

11
          <li key={m.id}>{m.title}</li>

12
        ))}

13
      </ul>

14
    </main>

15
  )

16
}

Points clés

  • npx create-next-app@latest pour démarrer
  • App Router + TypeScript + Tailwind par défaut
  • Structure app/ avec layout.tsx et page.tsx
  • Fichier .env.local pour stocker les clés secrètes
  • next.config.js : déclarer remotePatterns pour next/image
  • Directive 'use server' pour la logique server-only

Exercices rapides

  1. Personnalise le message dans <h1> et ajoute une sous-phrase en <p>.
  2. Charge et affiche l’année de sortie des 5 premiers films.
  3. Modifie la couleur de fond en mode sombre via Tailwind dans globals.css.