Skip to content

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.

Start buildingGet a demo
Mux is trusted by
Imgix logo
Vimeo
Hubla logo
Wistia
Plex logo
Fox
Strava
Loom logo
Hubspot
Barstool logo
Typeform
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

Player Icon

You are fully in control of playback experience

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

Integration42Icon

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 to add video to Next.js

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`); } }

Next.js 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 } } }
Learn more about Mux Player
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

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

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