Next Films

🌏 English | Português

This is a Next.js project bootstrapped with create-next-app.

This project is using the App Router.

With Next Films, you can search for movies or view a list of movies that are currently in theatres or based on the given genre and check their details.

Table of contents

• Features
• Tech Stack
• Demonstration
  • Scrolling
  • Search
  • Medium Screens
    • Collapsible sidebar
    • Favoriting
  • Small Screens
    • Clickable Links
• Screenshots
  • Movie details page
    • Default
    • Alternative
• Getting Started
• Routes
  • Deployment Summary
• Additional Information
• Author
• Show your support
• License

Features

• Movie search bar
• Infinite scrolling
• Collapsible sidebar
• Movie details page with movie information, including a link to a video¹ if it exists
• Favorites List using localStorage
• Global state using Context API

Tech Stack

• Next.js
• React
• TypeScript
• Sass
• react-intersection-observer
• Back-end: The Movie Database (TMDB) API

Demonstration

Scrolling

Search

Medium Screens

Collapsible sidebar

Favoriting

Small Screens

Clickable Links

The movie genres that appear on the details page are clickable links

Screenshots

Movie details page

Default

Alternative

Getting Started

Clone or download zip file:

git clone https://github.com/GuilhermeCCunha/next-films.git

You will need a TMDB account and an API key. In the project root folder, rename the file .env.local.example to .env.local:

Inside this file, you will see this line:

API_KEY=********************************

Replace the asterisks with your personal API key.

Install dependencies:

npm install
# or
yarn install
# or
pnpm install
# or
bun install

Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

Routes

/ - homepage displays a list of movies that are currently in theatres

/movies/genre/[genreID] - page that displays movies based on the given genre

/movies/search?name=[movieName] - page that displays movies based on searches for their original, translated and alternative titles

/movie/[movieID] - page that displays details about the movie

/favorites - page that displays a list of favorite movies

Deployment Summary

deployment summary - Vercel

• ƒ - server-rendered on demand
• ISR - Incremental Static Regeneration

Additional Information

• Next.js Documentation

• Learn Next.js

• The Next.js GitHub repository

• Vercel Platform from the creators of Next.js.

• Next.js deployment documentation for more details.

Author

• GitHub: @GuilhermeCCunha

Show your support

Please ⭐️ this repository if you liked it!

License

Copyright © 2025 Guilherme Cunha.
This project is MIT licensed.

Footnotes

1. The API doesn't provide any links to actual movies, only trailers/behind the scenes/featurettes, etc... ↩