Newsletter
Join the Community
Subscribe to our newsletter for the latest news and updates
Next.js starter template that adds Mux-powered video streaming to your app by dropping an MP4 into the videos folder.
Next.js Video Starter is a boilerplate template that adds Mux-powered video streaming to a Next.js application by letting you drop an MP4 file into the project and render it with a component. Created and maintained by Mux, the template combines Next.js with next-video, a library that handles video encoding, delivery, and playback. The result is a video player that streams like YouTube or Netflix without you building any backend infrastructure.
Next.js Video Starter is an open-source starter template, hosted on GitHub at github.com/muxinc/next-video-starter, that wires the next-video component into a Next.js project. It accepts one or more video files placed in the /videos directory and outputs a streaming-ready player on the page. The template runs on Next.js and can be deployed to Vercel with a one-click integration, and it includes a demo at next-video-demo.vercel.app and documentation at next-video.dev/docs.
import myVideo from "/videos/my-video.mp4") and pass it to the Video component's src attribute.vercel env pull to pull the Mux access tokens from Vercel, or copy .env.local.example to .env.local and manually set MUX_TOKEN_ID and MUX_TOKEN_SECRET.Next.js developers who want to add video to an existing app without building their own transcoding pipeline. Indie makers building video-centric products who want the fastest path from MP4 to a live streaming player. Teams that already use Mux or Vercel will find the starter fits their toolchain with minimal setup.
After setting up a Mux account, you add your video file to /videos, import it into the page component, and set it as the Video component's src. Running npm run dev will then serve the page and stream the video through Mux. For local development you first pull or set your Mux environment variables; for deployment you use the Vercel integration or set the tokens manually.
Yes, video playback goes through Mux. The Vercel deployment flow creates a Mux project for you, or you can create one directly at mux.com and set the access tokens in your environment.
The starter template itself is open source and free to use. Mux offers $20 of usage per month for $0 when you sign up through the Vercel integration, so you can test with real streaming without upfront cost.
The template uses Mux, which accepts common input formats like MP4. You place the file in the /videos directory and Mux handles encoding and delivery.
Yes. You can clone the repo, install dependencies, set MUX_TOKEN_ID and MUX_TOKEN_SECRET in .env.local, and run locally. Deployment is optional and can target any host that supports Next.js environment variables.
