Skip to content

High-performance video for your Next.js application

Mux is the best way to quickly add video to your Next.js application. Mux solves the hard problems with embedding, storing, streaming, and customizing video.

Start buildingRead the docs
import Video from 'next-video';
import myVideo from '/videos/myVideo.mp4'; 

export default function Page() { 
   return <Video src={myVideo} />;
}

Bring state of the art video infrastructure to your Next.js application

Adaptive Bitrate Icon

Adaptive Bitrate Streaming

Leverage the latest technology in video streaming, and deliver optimized video to your viewers based on their network environment for the best possible viewing experience

Integration42Icon

Easily integrate into your app

Mux will integrate into whatever app you're building. Drop in the next-video component, integrate with your CMS, or use our APIs to build your own video workflow

Player Icon

Full control of your playback

Mux Player gives you a customizable, accessible player with features like thumbnails and Chromecast built right in. Need more? You can bring your own HLS-compatible player, too.

Mux Data Icon

Data for your viewing experience

Mux Data measures video quality-of-experience metrics, the same way you measure front-end page performance

How to add video to Next.js

Link42IconUse next-video to quickly drop in a video

next-video is a React component for adding video to your Next.js application. It extends both the <video> element and your Next app with features to simplify video uploading, storage, and playback.

To get started...

  1. Run the install script: npx -y next-video init
  2. Add a video to your /videos folder. Mux will upload, store, and optimize it for you.
  3. Add the component to your app:
jsx
import Video from 'next-video'; import myVideo from '/videos/my-video.mp4'; export default function Page() { return <Video src={myVideo} />; }

That's it! Check out the docs to learn more.

Link42IconUse the API and our components for full control

Want to build your own video workflow? Here's an example of what you can do with the Mux API.

Let's start by creating an upload URL using the Mux Node SDK and the Direct Uploads API. Users will upload to that URL with Mux Uploader:

app/upload/page.jsx
import Mux from '@mux/mux-node'; import MuxUploader from '@mux/mux-uploader-react'; const { Video } = new Mux(process.env.MUX_TOKEN_ID, process.env.MUX_TOKEN_SECRET); export default async function Page() { const directUpload = await Video.Uploads.create({ cors_origin: '*', new_asset_settings: { playback_policy: 'public', }, }); return <MuxUploader endpoint={directUpload.url} />; }

Next, we'll listen for Mux webhooks. When we receive the notification that the video is ready, we'll add it to our database.

app/mux-webhook/route.js
export async function POST(request: Request) { const body = await request.json(); const { type, data } = body if (type === 'video.asset.ready') { await saveAssetToDatabase(data); } else { /* handle other event types */ } return Response.json({ message: 'ok' }); }

Finally, let's make a playback page. We retrieve the video from our database, and play it by passing its playbackId to Mux Player:

app/watch/[id]/page.jsx
'use client'; import MuxPlayer from '@mux/mux-player-react'; export default async function Page({ params }) { const asset = getAssetFromDatabase(params.id); return <MuxPlayer streamType="on-demand" playbackId={asset.id} accentColor="#ac39f2" />; }

And we've got upload and playback. Nice!

What's next? You can integrate with your CMS. You can optimize your loading experience. Or get started with the docs or an example project below:

Example Projects

Video starter logos

Video Course Starter Kit

If you’re a developer you’ve probably seen and used platforms like Egghead, LevelUp Tutorials, Coursera, etc. This is your starter kit to build something like that with Next.js + Mux. Complete with Github OAuth, the ability to create courses, adding video lessons, progress tracking for viewers.

Mux and Next.js logos

with-mux-video

This is a bare-bones starter application with Next.js that uses:


Stream.new logo

Stream.new

Stream.new is an open source Next.js application that does:


They said it best

@MuxHQ was an absolute lifesaver for videos on a previous project. Thumbnails, truly instant play via livestreaming, resizing, whole bit. I’m often skeptical of third-party services but I never could’ve competed with the UX they let me deliver

X Logo
Lachlan Campbell (@lachlanjc)
WWW designer-developer for climate @watershed
They said it best

Noteworthy: @muxhq is SO good! Amazing how fast that upload went…

X Logo
Guillermo Rauch (@rauchg)
CEO at Vercel

Mux is trusted by

Imgix logo
Vimeo
Hubla logo
Vercel
Plex logo
Fox
Strava
Loom logo
Hubspot
Barstool logo
Typeform
Gamestry logo

Try Mux with a risk free trial and $20 in credit.