DEV Community

Guillaume Sere
Guillaume Sere

Posted on

Building ArchiveFlix: A Free Movie Streaming Platform with Next.js 15

#nextjs #api #webdev #tailwindcss

# Building ArchiveFlix: A Free Movie Streaming Platform with Next.js 15

Recently, I built ArchiveFlix, a web application that allows users to discover and watch public-domain movies available through Internet Archive.

The goal was to create a modern streaming experience inspired by popular video platforms while relying entirely on freely accessible content.

Features

  • Browse a catalog of public-domain movies
  • Search movies instantly
  • Save favorites
  • Watch movies directly in the browser
  • Responsive design
  • SEO optimization with sitemap, robots.txt, and metadata

Tech Stack

  • Next.js 15
  • React
  • TypeScript
  • Tailwind CSS
  • Internet Archive API
  • Vercel

Retrieving Movie Data

One of the most interesting parts of the project was working with Internet Archive's APIs.

To retrieve the movie catalog, I used the Advanced Search API:

const response = await fetch(
  "https://archive.org/advancedsearch.php?q=mediatype:movies&fl[]=identifier&fl[]=title&rows=24&output=json"
);

const data = await response.json();
Enter fullscreen mode Exit fullscreen mode

Each movie can then be queried individually using the metadata endpoint:

const response = await fetch(
  `https://archive.org/metadata/${id}`
);

const metadata = await response.json();
Enter fullscreen mode Exit fullscreen mode

This provides information such as:

  • Title
  • Description
  • Creator
  • Runtime
  • Release year
  • Video files

Building the Video Player

After retrieving metadata, the application automatically extracts the available MP4 video file and displays it through a native HTML5 player.

<video controls>
  <source src={videoUrl} type="video/mp4" />
</video>
Enter fullscreen mode Exit fullscreen mode

This keeps the implementation simple while supporting all modern browsers.

SEO Optimization

Since the project contains many movie pages, SEO was an important consideration.

The application includes:

  • Dynamic metadata
  • Open Graph tags
  • Twitter cards
  • Dynamic sitemap generation
  • robots.txt
  • Google Search Console verification

Example:

export const metadata = {
  title: "ArchiveFlix",
  description:
    "Watch public-domain movies online for free.",
};
Enter fullscreen mode Exit fullscreen mode

Deployment Challenges

While everything worked perfectly in development, I encountered timeout issues after deploying to Vercel.

The issue came from requests to Internet Archive's metadata endpoints occasionally timing out.

To improve reliability, I added:

  • Error handling with try/catch
  • ISR caching using revalidate
  • Fallback states when requests fail

Example:

const response = await fetch(url, {
  next: {
    revalidate: 3600,
  },
});
Enter fullscreen mode Exit fullscreen mode

This significantly reduced the number of external requests and improved performance.

Final Thoughts

ArchiveFlix was a fun project that allowed me to work with external APIs, dynamic content, SEO optimization, and video streaming in Next.js.

The project demonstrates how publicly available content can be transformed into a modern user experience using today's web technologies.

I'd love to hear your thoughts and feedback.

🚀 Live Demo: https://archiveflix-60.vercel.app

nextjs #react #typescript #webdev #opensource #javascript #frontend #seo

Top comments (0)