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 demoMake sure that every user who views your videos is getting the best possible viewing experience
Use Mux Player, or use any HLS-compatible video player
Let Mux be your video infrastructure, not your CMS
The same way you measure frontend page performance, Mux Data measures video quality of experience metrics
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.
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.
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`);
}
}One line of code gives you a fully-featured video player. Integrated with Mux Data out of the box:
import MuxPlayer from '@mux/mux-player-react'
<MuxPlayer playbackId={playbackId} />Take advantage of Next.js for a great loading experience.
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 } }
}@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
Noteworthy: @muxhq is SO good! Amazing how fast that upload went…
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.
This is a bare-bones starter application with Next.js that uses:
Stream.new is an open source Next.js application that does:
Try Mux with a risk free trial and $20 in credit.