3e:I[242695,["/vc-ap-vercel-templates/_next/static/immutable/chunks/2v4s4eubso6ie.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/05p05zti_rn-6.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/03ei7k4u833lh.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/2-c9-j3hbb6_5.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/0ny310d9fke7v.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/0zfr81hirqwyt.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/2qnrr29u25u5t.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1icgfdp-j4khl.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/3702j97f9tiud.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1d1c70gp_t7ak.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/0cxf4qpb5soyw.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/15kid0fc4rbwi.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1w1qp7xynodi1.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/0wjhue0-vo4p0.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1g66byldwxk9w.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/3xtdbyzvu_spv.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/1tpfwo4utcu8-.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/2al5u4gvohhh-.js","/vc-ap-vercel-templates/_next/static/immutable/chunks/2pl22y-arv8ha.js"],"TemplateDetailsContentMarkdown"] 3f:T1261, 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 -