muxinc/next-video

What is it?

Key features

• 01Syncs local video files to remote storage and processes them automatically with the sync command.
• 02Keeps large video files out of git while tracking small JSON metadata files.
• 03Supports Mux, Vercel Blob, Backblaze, Amazon S3 and Cloudflare R2 as providers.
• 04Provides automatic placeholder posters and timeline hover thumbnails with Mux.
• 05Offers customizable player themes and a custom player component slot.
• 06Includes a standalone player and a background video component.

Use cases

• Hosting marketing or product videos on a Next.js site without committing media files to the repository.
• Adding a background video hero section with no player controls.
• Embedding videos that need adaptive streaming and captions via Mux.
• Migrating existing S3 or R2 video hosting into a Next.js build workflow.

Quick start

1. 1

   Run the automatic setup in your Next.js project root

   npx -y next-video init
2. 2

   Add your Mux access token to .env.local

3. 3

   Add a video to /videos and sync it to remote storage

   npx next-video sync
4. 4

   Start the dev server and open the demo page

   npm run dev

Things to know

• !Default remote storage and optimization require a Mux account and access token.
• !The /api/video route is unauthenticated by default and should be gated in production.

Topics

FAQ

What is next-video?

A React component for adding video to Next.js apps, with automatic upload, optimization and CDN delivery via Mux or other storage providers. next-video is a React component that extends the native video element for Next.js projects. You place video files in a local /videos folder, and the sync command uploads them to remote storage and processes them, so large media stays out of your git repository. Imports of video files resolve to asset objects that the Video component can play directly.

Is next-video free to use? What license does it have?

next-video is open source under the MIT license. Check the license terms before using it in commercial products.

Is next-video still maintained?

Actively maintained. The last commit to next-video was on Nov 3, 2026.

What can I use next-video for?

Hosting marketing or product videos on a Next.js site without committing media files to the repository. Adding a background video hero section with no player controls. Embedding videos that need adaptive streaming and captions via Mux. Migrating existing S3 or R2 video hosting into a Next.js build workflow.

How do I install next-video?

Run the automatic setup in your Next.js project root: npx -y next-video init Add your Mux access token to .env.local Add a video to /videos and sync it to remote storage: npx next-video sync Start the dev server and open the demo page: npm run dev

Where can I get next-video?

The source code and installation instructions are on GitHub: https://github.com/muxinc/next-video