Drupal 11 + Next.js: NASA Videos API

A searchable video library built into the Book 1 portfolio site that pulls directly from NASA's public media archive.

URL Drupal with Next.js:
https://github.com/franciscojavierguardado101/Drupal-Frontend-Nasa-Videos

URL of webpage:
https://franciscojavierguardado101-book-1-f.vercel.app/iss-tracker

How it works with the API                                     
NASA provides a free public API at images-api.nasa.gov that exposes their full photo and video archive. The component talks to it in two stages:

Stage 1: Search. When the page loads (or a user searches), the Next.js backend calls NASA's /search endpoint filtered to media_type=video, requesting 12 results per page. NASA returns a list of items with titles, descriptions, dates, keywords, and thumbnail image URLs. The component renders these as a card grid. A "Load More" button fetches the next 12 and appends them to the existing list.

Stage 2: Playback. Thumbnail cards don't include the actual video file URL and NASA keeps those separate. When a user clicks a card, the component makes a second call to NASA's /asset/{id} endpoint, which returns a collection of files for that video (different resolutions and formats). The code picks the best available .mp4 preferring medium quality, falling back to mobile, then any .mp4 and feeds that URL into an HTML5 video player inside a modal.

The Next.js route handler (/api/nasa-videos) sits in between the browser and NASA's API, keeping the NASA calls server-side. Search results are cached for 1 hour, video asset URLs for 24 hours, so repeat views are fast without hammering NASA's servers.