Rebuilding YouTube with api.video and Next.js

This tutorial will show how quick and straightforward it is to build a youtube clone with api.video and Next.js. By encapsulating the front-end and backend inside our Next app, we can rapidly develop and deploy as we need a backend to run @api.video/nodejs-client.

YouTube’s core functionality is the video library, so today, we will focus on this crucial feature: listing videos. You will have all the steps to build a public catalog of videos for your product. The demo is available here and the code here. Let's start 🎬

1. Application setup

Let's quickly start to build a new Next.js application using Create Next App

Run these commands in the terminal:

*Note: We'll use styled-components and react-feather for icons to style our example application, but you can ignore these steps if you have another preference. *

Once inside our project, install these three packages:

2. Configuration

Configuration styled-components

Since 12.1, Next.js added support to the Next.js Compiler for styled-components, update your next.config.js file:

Create a custom _document.js file

To render our styled-components at the server-side, we need to override _document.js. For this, create a _document.js file under the pages folder and add the following content into it. We will use also use the google font Roboto.

3. How to fetch data

Create API routes with api.video/nodejs-client

You can declare the API under the pages/apidirectory. When you declare a file or folder insidepages/api, it will generate an URL endpoint that matches /api/<folder>/<file>. It's all server-side. We set our API key in an environment variable in the .env.development file for security.

Now create a pages/api/content.jsfile. Inside this file, add the following code:

We can get videos in just a few lines of code by applying the method list.

@api.video/nodejs-client allows us to filter by title, tags, metadata, description, pageSize, full documentation is here. Let's focus on title for now.

Call API routes in the front-end.

Go to pages/index.js and call the endpoint we just created on mounting. Save the result in the state videos.

Search on the navbar

@api.video/nodejs-client allows us to filter videos by name. We’re going to implement a simple field where we can enter a searchable value.

4. How to display a list of videos

How to filter videos with tags

api.video provides many features. One of them allows you to a tag to a single video. This demo excellently showcases how to use it.

1 ) Add a tag to the dashboard.

The easiest way to add a tag is to go to api.video dashboard, go to videos sections, click on a video, “see details” of a video and add a tag. The video here explains how to do it.

The next step is to apply the filterTags function to the videos, which:

• Retrieves all of the tags
• Sorts by “the most used”
• Returns a clean tag array that we will store in a state

2 ) Store tags in a state

We call this util function each time we get videos. We store the array of values in a state. We also create another state, “active state, “ the current state. By default, it is “All”.

3 ) Display Tags component

The tag's value is in the Chip component. By default, the Chip “All” is displayed, and next, each tag is stored in the tag array. If you click on the chip, you update the value of the tag state. The props isActive shows a different style based on whether true or false.

4 ) Filter videos by the activeTag

Then let's apply to the videos array the filterElement function, which only displays videos whose tags are equal to the activeTag. This function applies only if the activeTag is different from All.

5. How to use the player from api.video

api.video provides a performant and fully customizable player. As soon as you upload a video, it automatically creates a link to the api.video's player. You can, of course, customize your player directly in the dashboard. Then, let's encapsulate the player in an iframe. The props video corresponds to a video object.

Conclusion

We recreated YouTube thanks to api.video’s features in just a few steps. We did not cover all the topics such as dynamic routing usage of react context to store the API key, but the entire code is available here.

And we're done! To start building right now, check our docs and sign up for a free account.

BONUS

In this part, I will explain how easily you can display the video on hover

Create a file to regroup our CSS logic in style.js. The trick is to display the video on hover instead of the image. A way to achieve it is to add the property display: none to the image and display: block to the video.

As shown below, we pass each video object as props to the Video component.

We don't need to format the answer in the child component Video. We can destructure the video object and access the image and video.