Consommer une API et afficher des films

Pourquoi ce module ?

Dans ce module, tu vas découvrir comment intégr­er l’API The Movie Database (TMDB) dans une app Next.js 15 full-stack. Plutôt que de maintenir des données statiques, tu apprendras à récupérer dynamiquement la liste des films et des séries, à valider et typer les réponses, puis à les afficher via des composants React réutilisables.

Objectifs pédagogiques

• Se connecter à une API externe (TMDB) en toute sécurité
• Protéger ta clé d’API avec les variables d’environnement
• Effectuer des requêtes serveur à l’aide de React Server Components
• Valider et typer les données avec Zod pour éviter le any
• Structurer le code dans app/server et séparer clairement logique client / serveur
• Créer un composant MovieCard (et SerieCard) 100 % réutilisable
• Optimiser le rendu d’images avec le composant next/image
• Gérer l’affichage conditionnel selon l’authentification

Prérequis

Avant de démarrer ce module, tu dois déjà avoir :

• Un projet Next.js 15 initialisé avec TypeScript
• Prisma configuré pour la partie base de données
• Un système d’authentification en place (module précédent)
• Une clé TMDB stockée dans .env sous THEMOVIEDB_API_KEY

Aperçu des étapes

1. Configuration de l’API TMDB
   • Créer un fichier app/server/movies.ts
   • Implémenter une fonction fetchMovieDb pour centraliser les appels
2. Récupération et typage des films populaires
   • Définir un schéma Zod (GetMoviesSchema)
   • Implémenter getMovies() et getSeries()
3. Affichage des données
   • Créer MovieCard.tsx et SerieCard.tsx dans app/components
   • Utiliser next/image pour optimiser les affichages de posters
4. Composants réutilisables
   • Paramétrer les props movie, serie, action et user
   • Afficher un bouton d’ajout à l’historique ou un lien vers la page de login
5. Gestion des erreurs et UI
   • Afficher un fallback (Skeleton) pendant le chargement
   • Gérer les cas où l’API renvoie un format inattendu

1
'use server'
2
import { z } from 'zod'
3
const GetMoviesSchema = z.object({
4
  page: z.number(),
5
  results: z.array(z.object({
6
    id: z.number(),
7
    title: z.string(),
8
    poster_path: z.string(),
9
    release_date: z.string(),
10
  })),
11
})
12

13
export async function getMovies() {
14
  const res = await fetch(
15
    `https://api.themoviedb.org/3/movie/popular`,
16
    { headers: { Authorization: `Bearer ${process.env.THEMOVIEDB_API_KEY}` } }
17
  )
18
  const data = await res.json()
19
  const { results } = GetMoviesSchema.parse(data)
20
  return results
21
}

Avec ce module, tu maîtriseras la chaîne complète : de la récupération sécurisée des données à leur affichage fluide et typé. Prêt·e à plonger ? Allez, c’est parti !