Create the Dynamic Movie Route

Create the route that maps /movie/<id> to a Next.js page and expose the id to the server component.

Step 1 — Create the folder

Create app/movie/[id]/page.tsx. The [id] directory is the dynamic route segment; Next.js will populate it from the URL.

Step 2 — Accept the route params

Define the page so it receives params as a promise and resolve it before using the id.

export default async function MoviePage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;

Step 3 — Fetch the movie

Import getMovieDetail from the TMDB client and call it with the route id.

const movie = await getMovieDetail(id);

The rest of the page can now render from one MovieDetail value instead of pulling individual fields directly out of TMDB.

Checkpoint

Visit /movie/27205 or another known movie id. The route should resolve to the new page component, even before all of its sections have been rendered.