Creating a Dynamic Movie Database with Next.js and Modern APIs

Introduction

In the ever-evolving world of web development, creating dynamic and responsive applications is crucial. Next.js, a React-based framework, is at the forefront of this trend, providing developers with the tools to build robust web applications. In this article, we’ll explore how to create a dynamic movie database application using Next.js and a modern movie API, with TypeScript examples to guide the way.

Why Next.js?

Next.js offers powerful features like server-side rendering, static site generation, and API routes, making it an excellent choice for building performant web applications. With the addition of TypeScript, you can enhance your application’s reliability by catching potential errors early.

Setting Up the Project

Before diving into the code, ensure you have Node.js and npm installed on your machine. Then, create a new Next.js application using the following command:

npx create-next-app my-movie-db --typescript

This command sets up a new Next.js project with TypeScript configured out of the box.

Fetching Data from an API

For our movie database, we’ll use a public movie API like The Movie Database (TMDb). Start by signing up and obtaining an API key.

Create a file named api.js to manage API requests:

// api.ts
const API_KEY = process.env.TMDB_API_KEY;
const BASE_URL = 'https://api.themoviedb.org/3';

export const fetchMovies = async (query: string) => {
  const response = await fetch(`${BASE_URL}/search/movie?api_key=${API_KEY}&query=${encodeURIComponent(query)}`);
  if (!response.ok) {
    throw new Error('Failed to fetch movies');
  }
  return response.json();
};

Ensure you’ve added your API key to an .env.local file in your project root:

TMDB_API_KEY=your_api_key_here

Building the Movie List Component

Next, create a new component to display movies. This will involve iterating over the data fetched from the API.

// components/MovieList.tsx
import React from 'react';

interface Movie {
  id: number;
  title: string;
  release_date: string;
  overview: string;
}

interface MovieListProps {
  movies: Movie[];
}

const MovieList: React.FC<MovieListProps> = ({ movies }) => {
  return (
    <div>
      {movies.map((movie) => (
        <div key={movie.id}>
          <h3>{movie.title}</h3>
          <p>{movie.release_date}</p>
          <p>{movie.overview}</p>
        </div>
      ))}
    </div>
  );
};

export default MovieList;

Integrating the Component in Pages

Create a page in Next.js to search for movies and display them using MovieList.

// pages/index.tsx
import React, { useState } from 'react';
import { fetchMovies } from '../api';
import MovieList from '../components/MovieList';

const Home: React.FC = () => {
  const [query, setQuery] = useState('');
  const [movies, setMovies] = useState([]);

  const handleSearch = async () => {
    try {
      const data = await fetchMovies(query);
      setMovies(data.results);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <h1>Movie Database</h1>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search for a movie..."
      />
      <button onClick={handleSearch}>Search</button>
      <MovieList movies={movies} />
    </div>
  );
};

export default Home;

Conclusion

By leveraging Next.js and TypeScript, we built a dynamic movie database application that fetches data from a modern API. This setup provides a solid foundation for further enhancements, such as advanced filtering, detailed movie pages, and improved UI/UX design. Experiment with the code and consider deploying your application to see it in action. Happy coding!