Connexion à l’API The Movie Database

Génère une clé API, sécurise-la et configure l’appel serveur à TMDB.

4 min read

Accéder gratuitement à cette formation

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

Dans cette leçon, tu vas apprendre à intégrer l’API de The Movie Database (TMDB) dans une app Next.js 15 full-stack. On va :

  1. Générer une clé secrète.
  2. Créer un wrapper fetchMovieDb.
  3. Valider et typer les réponses avec Zod.
  4. Récupérer et afficher les films récents dans un React Server Component.

Prérequis

  • Un projet Next.js 15 initialisé (App Router, TypeScript, Tailwind CSS).
  • Node.js installé.
  • Navigateur sur http://localhost:3000.

Générer et stocker la clé TMDB

  1. Crée un compte sur themoviedb.org.
  2. Dans ton profil, génère un token API v4.
.env
1
THEMOVIEDB_API_KEY=ton_token_secret

Créer le wrapper HTTP

On va centraliser l’appel fetch pour injecter automatiquement le token.

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

2
const API_KEY = process.env.THEMOVIEDB_API_KEY;

3


4
export async function fetchMovieDb({ url }: { url: `/${string}` }) {

5
  const res = await fetch(`https://api.themoviedb.org/3${url}`, {

6
    method: 'GET',

7
    headers: {

8
      accept: 'application/json',

9
      Authorization: `Bearer ${API_KEY}`,

10
    },

11
  });

12
  if (!res.ok) {

13
    throw new Error(`TMDB error: ${res.status}`);

14
  }

15
  return res.json();

16
}

Valider et typer la réponse avec Zod

Installe Zod :

Terminal
1
npm install zod

Définis un schéma et une fonction getMovies :

app/server/movies.ts
1
import { z } from 'zod';

2


3
const MoviesSchema = z.object({

4
  page: z.number(),

5
  results: z.array(

6
    z.object({

7
      id: z.number(),

8
      title: z.string(),

9
      poster_path: z.string(),

10
      release_date: z.string(),

11
    })

12
  ),

13
});

14


15
export async function getMovies() {

16
  const raw = await fetchMovieDb({ url: '/movie/popular' });

17
  const data = MoviesSchema.parse(raw);

18
  return data.results;

19
}

Consommer l’API dans un React Server Component

Dans app/page.tsx, transforme le composant en async et appelle getMovies() :

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

2


3
export default async function Home() {

4
  const movies = await getMovies(); // Récupère un tableau typé Movie[]

5
  return (

6
    <main className="p-8">

7
      <h1 className="text-4xl font-bold">Films populaires</h1>

8
      <div className="mt-6 grid grid-cols-2 md:grid-cols-4 gap-4">

9
        {movies.map(movie => (

10
          <div key={movie.id}>{movie.title}</div>

11
        ))}

12
      </div>

13
    </main>

14
  );

15
}

Créer un composant MovieCard

Pour chaque film, affiche l’affiche optimisée avec next/image :

app/components/MovieCard.tsx
1
import Image from 'next/image';

2


3
export function MovieCard({

4
  title,

5
  poster_path,

6
  release_date,

7
}: {

8
  title: string;

9
  poster_path: string;

10
  release_date: string;

11
}) {

12
  return (

13
    <div className="rounded shadow overflow-hidden">

14
      <div className="relative h-48 w-full">

15
        <Image

16
          src={`https://image.tmdb.org/t/p/w500${poster_path}`}

17
          alt={title}

18
          fill

19
          className="object-cover"

20
        />

21
      </div>

22
      <div className="p-2">

23
        <h2 className="font-semibold">{title}</h2>

24
        <p className="text-sm text-gray-500">

25
          {new Date(release_date).getFullYear()}

26
        </p>

27
      </div>

28
    </div>

29
  );

30
}

Boucler sur les films

Modifie le rendu de Home pour utiliser MovieCard :

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

2
import { MovieCard } from './components/MovieCard';

3


4
export default async function Home() {

5
  const movies = await getMovies();

6
  return (

7
    <main className="p-8">

8
      <h1 className="text-4xl font-bold">Films populaires</h1>

9
      <div className="mt-6 grid grid-cols-2 md:grid-cols-4 gap-4">

10
        {movies.map(movie => (

11
          <MovieCard key={movie.id} {...movie} />

12
        ))}

13
      </div>

14
    </main>

15
  );

16
}

Configurer les images distantes

Next.js exige que tu déclares l’hôte externe dans next.config.js :

next.config.js
1
module.exports = {

2
  images: {

3
    remotePatterns: [

4
      {

5
        protocol: 'https',

6
        hostname: 'image.tmdb.org',

7
      },

8
    ],

9
  },

10
};

Récapitulatif

  • Tu as généré une clé TMDB et l’as stockée en .env.
  • Tu as centralisé fetchMovieDb sous un module serveur.
  • Tu as typé et validé la réponse avec Zod.
  • Tu as consommé l’API dans une React Server Component.
  • Tu as affiché tes films grâce à MovieCard et next/image.

Exercices

  1. Étends la leçon pour récupérer et afficher les séries populaires via /tv/popular.
  2. Implémente la pagination : ajoute deux boutons « Précédent » et « Suivant » pour changer de page (?page=2).
  3. Crée une page dynamique [id] pour afficher les détails d’un film (via /movie/{id}).