Skip to content

🍨Let's talk video infrastructure, Real-Time Video, and gelato. Meet us at re:Invent.🍨

Mux is the best way to add video to your Next.js application

If Next.js is your framework of choice for building your application, Mux fits in perfectly when you need to add video.

Trusted By
Imgix logo
Tella logo
Hubla logo
Plex logo
Loom logo
Gamestry logo

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

Adaptive bitrate icon
Adaptive Bitrate Streaming

Make sure that every user who views your videos is getting the best possible viewing experience

Playback icon
You are fully in control of playback experience

Use Mux Player, or use any HLS-compatible video player

Integrate icon
Integrates into your database or CMS

Let Mux be your video infrastructure, not your CMS

Mux Data icon
Data about your end-user viewing experience

The same way you measure frontend page performance, Mux Data measures video quality of experience metrics

Learn more about Mux Data

How it works

API Routes with the Mux Node SDK

All API requests against the Mux API can be made securely from your application’s backend using the Mux Node SDK inside Next API Routes in pages/api.

Configure environment variables with your Mux API keys: process.env.MUX_TOKEN_ID & process.env.MUX_TOKEN_SECRET.

pages/api/upload.ts
import { NextApiRequest, NextApiResponse } from 'next';
import Mux from '@mux/mux-node';

const { Video } = new Mux();

export default async (req: NextApiRequest, res: NextApiResponse): Promise<void> => {
  const { method } = req;

  switch (method) {
    case 'POST':
      try {
        const upload = await Video.Uploads.create({
          new_asset_settings: { playback_policy: 'public' },
          cors_origin: '*',
        });
        res.json({
          id: upload.id,
          url: upload.url,
        });
      } catch (e) {
        res.json({ error: 'Error creating upload' });
      }
      break;
    default:
      res.setHeader('Allow', ['POST']);
      res.status(405).end(`Method ${method} Not Allowed`);
  }
};

Use Next.js API Routes to listen for Mux webhooks.

pages/api/mux-webhook.ts
import { NextApiRequest, NextApiResponse } from 'next';

export default async function muxWebhookHandler (req: NextApiRequest, res: NextApiResponse): Promise<void> {
  const { method, body } = req;

  switch (method) {
    case 'POST': {
      const { data, type } = body;

      if (type === 'video.asset.ready') {
         /* mark your asset as ready */
      } else {
         /* handle other event types */
      }
      res.json({ message: ok });
    } default:
      res.setHeader('Allow', ['POST']);
      res.status(405).end(`Method ${method} Not Allowed`);
  }
}

Video Playback with <MuxPlayer />

One line of code gives you a fully-featured video player. Integrated with Mux Data out of the box:

jsx
import MuxPlayer from '@mux/mux-player-react'
<MuxPlayer playbackId={playbackId} />

Take advantage of Next.js for a great loading experience.

jsx
import muxBlurHash from '@mux/blurhash'
import MuxPlayer from '@mux/mux-player-react/lazy'

export default function Page({ playbackId, sourceWidth, sourceHeight, blurHashBase64 }) {
  return <MuxPlayer
    playbackId={playbackId}
    style={{ aspectRatio: `${sourceWidth}/${sourceHeight}` }}
    placeholder={blurHashBase64}
  />
}

export async function getServerSideProps({ params }) {
  const playbackId = params.playbackId
  const { sourceWidth, sourceHeight, blurHashBase64 } = await muxBlurHash(playbackId)

  return { props: { playbackId, sourceWidth, sourceHeight, blurHashBase64 }  }
}
What others are saying

Example projects

Video starter logos
Video Course Starter Kit

This is a starter kit for building an online video course. 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:


  • Mux Direct Uploads

  • Mux Video + Mux Data

  • Mux Player
Stream.new logo
Stream.new

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


  • Mux Direct Uploads

  • Content Moderation with Google Vision or Hive.ai Read more

GET /video

No credit card to start. $20 in free credit when you're ready.