api.video Next.js boilerplate: start your video project the easy way

No doubt, Next.js is one of the best React framework for full-stack web applications.

What if you want to create your own video application? A Next.js boilerplate with all api.video features is ready for you to begin your journey 🧑‍💻

What’s a boilerplate 🤔

A boilerplate is a unit of writing that can be reused without change. The idea is sometimes applied to reusable programming, and that’s the case here: our Next.js boilerplate is a starter pack containing all api.video features that anybody can use, without having to change anything in it to start a new project.

Of course, you are free to modify anything once your application is running!

What can I achieve with this boilerplate 🥇

After the boilerplate has been bootstrapped, you can run your brand-new application and enjoy api.video features!

Upload videos, display them as a list, and play any video in a fully customizable player.

api.video proposes many more endpoints to manage and create a complete video application. Check our documentation to learn about this.

Get started 🏁

Find out about how to use our boilerplate on the README file, or follow the guide bellow 👇

1. Create a new Next.js application by running one of the following commands in a new terminal and following the command prompts.

npx create-next-app --example with-apivideo
# or
yarn create next-app --example with-apivideo
# or
pnpm create next-app --example with-apivideo

2. Rename the .env.local.example file with .env.
3. Find your API key in the api.video dashboard API keys section and add its value to the API_KEY environment variable in the .env file.

API_KEY=APIKEYVALUE

💡 If you don’t already have an api.video account, create a free one here.

4. Start your application by running yarn dev in your terminal, and voilà!

You should be able to see a basic sample app from where you can upload videos and see them as a list.

Everything in this application is set up to build a complete video application, from Next.js to api.video, enjoy coding!

Find the full boilerplate in the official Next.js repository right here.

Yohann Martzolff

Front-end Engineer