Next.js Video Starter

Next.js Video Starter

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

Docs · Demo · GitHub

Table of Contents

• Deploy: Need a Mux account? Start here.
• Getting Started: Already created a Mux account using the Vercel integration? Start here.
• 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.

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 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:

1
vercel env pull

Step 2. Add your video

Add your video directly to the /videos directory. For example, /videos/my-video.mp4.

Step 3. Import your video

Import your video into the home page and replace the getting started video.

1
- import getStarted from "/videos/get-started.mp4";
2
+ 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.

1
- <Video className={styles.video} src={getStarted} />
2
+ <Video className={styles.video} src={myVideo} />

Step 5. Celebrate!

Run npm run dev! Congratulations, you're now streaming a video just like some of your favorite sites such as YouTube or Netflix! Interested in how video streaming works?

What now? See the next-video docs to learn how to set custom poster images, create background videos, use a custom player, and more!

Manual Setup

Step 1. Create your Mux account

Option 1: The easiest way to get started with Mux is through the native integration in the Vercel Marketplace. Vercel Marketplace users will get $20 of usage/month for $0. Learn more.

Option 2: You can also get started by creating an account directly in Mux.

Step 2. Clone this example

1
git clone git@github.com:muxinc/next-video-starter.git

1
cd next-video-starter

1
npm install

Step 3. Set up environment variables

Copy the .env.local.example file in this directory to .env.local (which will be ignored by Git):

1
cp .env.local.example .env.local

Then, go to the settings page in your Mux dashboard, get a new API Access Token. Use that token to set the variables in .env.local:

• MUX_TOKEN_ID should be the TOKEN ID of your new token
• MUX_TOKEN_SECRET should be TOKEN SECRET

Step 4. Add your own video

Go to the add your video step in the getting started section above to start playing your own videos.

Step 5. Deploy on Vercel

You can deploy this app to the cloud with Vercel (Documentation).

To deploy on Vercel, you need to set the MUX_TOKEN_ID and MUX_TOKEN_SECRET environment variables using either the Vercel Dashboard or the Vercel CLI

Then push the project to GitHub/GitLab/Bitbucket and import to Vercel to deploy.