https://github.com/apivideo/youtube-clone-next
Rebuilding YouTube with api.video and Next.js 🎥
https://github.com/apivideo/youtube-clone-next
nextjs nodejs tutorial video video-player
Last synced: 9 months ago
JSON representation
Rebuilding YouTube with api.video and Next.js 🎥
- Host: GitHub
- URL: https://github.com/apivideo/youtube-clone-next
- Owner: apivideo
- Created: 2022-02-25T09:40:53.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-03-08T15:42:06.000Z (over 3 years ago)
- Last Synced: 2025-07-21T09:32:43.693Z (11 months ago)
- Topics: nextjs, nodejs, tutorial, video, video-player
- Language: JavaScript
- Homepage: https://api-video-youtube-demo.netlify.app
- Size: 178 KB
- Stars: 28
- Watchers: 3
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Rebuilding YouTube with api.video + Next.js 🔥
An open-source example application that allows users to list videos in the youtube style using api.video
View Demo
Table of Contents
# About The Project
### api.video:
- [@api.video/nodejs-client.](https://github.com/apivideo/api.video-nodejs-client) - api.video's Node.js is a lightweight client built in TypeScript that streamlines the coding process. Chunking files is handled for you, as is pagination and refreshing your tokens.
### NextJS:
- [`/pages/api`](pages/api) routes — a couple endpoints for making requests to the api.video API.
- Dynamic routes to display a specific video.
- Usage of [React API Context](https://fr.reactjs.org/docs/context.html) to store a new ApiKey
# Getting Started
## Step 1. Clone
First we need to clone the project
```bash
git clone git@github.com:apivideo/youtube-clone-next.git
cd youtube-clone-next
# run the development server
npm run dev
# or
yarn dev
```
## Step 2. Create an account
All you need to set this up is a [api.video account](https://dashboard.api.video). You can sign up for free. You can use our services in sandbox environment but the videos you upload will last 24 hours.
Once you signed up, you will have a sandbox API Key available on the home page.
## Step 3. Set Up Environment Variables
In order to see your videos by default, all you have to do is to use your API Key. You need to create a environment variable at the root of the project.
```bash
touch .env.development
```
Then edit the file like `API_KEY` should be your `API_KEY` available on the dashboard
```javascript
API_KEY = XXXXXXXXXXXXXXXXXXXXXXXXXXX;
```