Render the Overview and Cast

Finish the content beneath the hero by adding synopsis information and a small cast section. The data layer already returns one detail object; only the cast needs its own request.

Step 1 — Add the cast query

In lib/tmdb.ts, create getMovieCast and request /movie/{id}/credits.

const data = await tmdbFetch(`/movie/${id}/credits`);

Limit the result to the first eight cast members and transform each one into the CastMember type, including a profile URL when TMDB provides one.

Step 2 — Load cast in the page

Call getMovieCast(id) alongside the movie detail request. With both values available, the page can render the overview and cast from stable application types.

Step 3 — Render the overview

Use movie.overview for the synopsis and keep the default string returned by getMovieDetail when TMDB has no overview.

Step 4 — Render cast cards

Map over the cast array and show the person’s name and character. When profileUrl is missing, retain the visual placeholder rather than breaking the grid.

Checkpoint

A movie detail page now shows the synopsis and up to eight cast members. Movies without profile photos still render cleanly.