Next.js Video Starter - the fastest way to add video Next.js.

Next.js Video Starter

The fastest way to add video to your Next.js app.

Docs · Demo · GitHub

## Table of Contents - [Deploy](#deploy): Need a Mux account? Start here. - [Getting Started](#getting-started): Already created a Mux account using the Vercel integration? Start here. - [Manual Setup](#manual-setup): Interested in running locally and deploying manually? Start here. ## Deploy Vercel deployment will guide you through creating a Mux account and project with $20 of usage/month for $0. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/muxinc/next-video-starter&products=[{"type":"integration","productSlug":"mux","integrationSlug":"mux","protocol":"video"}]) ## Getting Started This section assumes you've setup a Mux account and project using the Vercel Integration (press deploy button above). If you only want to develop locally, follow the [Manual Setup](#manual-setup) steps below. ### Step 1. Pull environment variables You'll need your Mux access token and secret token before you can begin adding videos. Run the following command to pull them from Vercel: ```bash vercel env pull ``` ### Step 2. Add your video Add your video directly to the [`/videos`](./videos/) directory. For example, `/videos/my-video.mp4`. ### Step 3. Import your video Import your video into the [home page](./app/page.tsx) and replace the getting started video. ```diff - import getStarted from "/videos/get-started.mp4"; + import myVideo from "/videos/my-video.mp4"; ``` ### Step 4. Add the video to the player Finally, set the video `src` to point to your newly imported video. ```diff -