Introduction

What is Next.js?

Next.js is an open-source web development javascript Framework build on React by Vercel, enabling React-based applications with extra features like server-side rendering, in-built routing etc.

The purpose of my using this framework:-

1. To learn and understand how to build a web app using Next.js Framework.

2. To completely take the advantage of server-side rendering that Next.js provides, which can help a Streaming Platform to serve its customer's needs faster and more efficiently.

What is this project about?

This project is based on one of the very famous Streaming Platform in India, Disney+Hoststar. I have tried to create a very detailed clone of the platform. I have used Next.js for developing the clone of this platform. I have used libraries like SWR, TailwindCss, Swiperjs and Sharp. I have used TMDB for getting data.

I build this project to learn and understand how to handle an advanced API like TMDB in the Frontend efficiently.

Why I used certain libraries for this project?

1. I used the SWR library to use client-side for certain situations like rendering an individual movie/show detail page at the user's demand (Will Improve it in the coming days).

2. I used TailwindCss for styling.

3. I used Swiperjs to create beautiful sliders on the top of certain pages.

4. I used Sharp because Nextjs recommended it to use for Image Optimization.

The problems I faced

1. I spent a lot of time exploring the API for different categorical data according to the requirements. I encountered a lot of errors there.

2. I had to face some errors while doing dynamic routing. In that, I had to use getStaticPath(), you have to predefine the paths for your routing, which was not possible for this project as there were multiple API endpoints I had to deal with for the movies and shows detail page. I also came to know that the names of dynamic routes should be different for every file and folder.

3. I faced challenges when rendering Images as they were constantly throwing errors that In next.config.js path for Image is not defined.

How can you use my project?

Clone the Repository from GitHub

git clone https://github.com/BurhanRaja/Disney-Plus-hotstar-Clone.git
cd Disney-Plus-hotstar-Clone

Install Dependencies

npm install

Create .env file

NEXT_PUBLIC_URL=https://api.themoviedb.org/3/
NEXT_PULIC_API_KEY=your_api_key_from_tmdb

and at the end run

npm run dev

Project Link

Checkout my GitHub for the project

Project Demo

Thank you.