Data Layer: TMDB API with React Server Components
The TMDB (The Movie Database) API is free and gives you access to posters, metadata, trailers, and cast information. In Next.js with the App Router, fetch TMDB data inside Server Components — this keeps your API key off the client and means pages arrive with data pre-rendered. Use `fetch` with `next: { revalidate: 3600 }` to cache responses for an hour, preventing excessive API calls. Structure your data fetching around routes: `/movie/[id]` fetches individual movie data, while the homepage fetches trending lists.
UI Architecture: Carousels and the Hero Banner
The Netflix scroll carousel is a horizontal `<ul>` with `overflow-x: auto` and CSS snap points (`scroll-snap-type: x mandatory`). Avoid JavaScript-based carousels for performance — CSS scroll snap is hardware-accelerated. The hero banner requires a full-bleed image with `position: absolute` overlay, a gradient from transparent to your background color along the bottom, and the movie metadata layered on top with `z-index`. Use `next/image` for all poster and banner images to get automatic format optimization.
Video Playback: From YouTube Trailer to Real Streaming
Most Netflix clones stop at embedding a YouTube iframe of the movie trailer. To build a real player, you need a direct video source. Use hls.js to support .m3u8 streams in Chrome and Firefox, or a native `<video>` tag for MP4 sources. Wrap the player in a dialog/modal with a dark backdrop that mounts when the user clicks play. Store the last playback position in `localStorage` and restore it on remount for a resume feature. Add keyboard event listeners for spacebar pause, arrow key seeking, and F for fullscreen.