How to add Video Player in Next.js ?

In this article, we are going to learn how we can add Video Player in NextJs. NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and mac. 

Approach: To add our Video Player we are going to use the react-player package. The react-player package helps us to add a video player anywhere in our app. So first, we will install the react-player package and then we will add a video player on our homepage.

Create NextJS Application: You can create a new NextJs project using the below command:

npx create-next-app gfg

Install the required package: Now we will install the react-player package using the below command:

npm i react-player

Project Structure: It will look like this.

Adding the Video Player: After installing the package we can easily add Video Player to our app. For this example, we are going to add a video player to our homepage.

index.js

import React from 'react'
import ReactPlayer from 'react-player'

export default function VideoPlayer(){
  return (
    <div>
      <h2>NextJs VideoPlayer - GeeksforGeeks</h2>
      <ReactPlayer url='https://www.youtube.com/watch?v=wWgIAphfn2U' />
    </div>
  )
}

Explanation: In the above example first, we are importing our ReactPlayer component from the installed package. After that, we are using the ReactPlayer component inside a new function. We can enter the link of the video that we want to play.

Steps to run the application: Run the below command in the terminal to run the app.

npm run dev

Output: