Using Mux Player to Add Videos to my Next.js Blog

I’m a developer with a blog, which means I spend most of my time fiddling with Next.js and very little time actually writing blog posts. But I’ve had a growing interest in video — and not just because I work at Mux. Video is great for storytelling. So I thought, why not include it in my blog?

Maybe you want to record tutorials. Or post talks you’ve given. Or maybe you’re like me, and you spent most of the pandemic doing Zoom improv that you want to share with the world. Let’s see how easy it is to put video into our Next.js blog.

In the past, I’ve used large platforms like YouTube to host videos. They have vast infrastructure and handle everything for free. But uploading my content to these platforms means I’m feeding the ad machine that keeps them running. “If you don’t pay for the product, you are the product.” And YouTube doesn’t care whether it’s recommending quality content or disinformation as long as someone’s watching it.

Don’t get me wrong, I love YouTube. In fact, I think I’m addicted. But I want alternatives, and I want more ownership of my content. Plus, I want it to look good on my site. When I embed a video hosted on YouTube, they don’t let me customize the player. It’s branded as YouTube and designed to funnel users back to their site. I want to use something that I have a little more control over.

So then, what do I do? Upload an mp4 to an S3 bucket and hope it works? That’s what a lot of developers do. And I’m here to tell you: this is not the way, my friend.

Are all of your visitors on a fiber network and a 6k retina display? No. They’re on mobile phones with spotty internet and a menagerie of screen sizes and codec support. They’re on devices you’ve never even heard of, and they expect your videos to Just Play™. And even though I know you love solving hard problems and avoiding writing blog posts to do it, you’re wasting your time.

You already rely on Next.js to bundle and minify your JS, generate static resources for fast load times, and optimize images. Mux is like that for video. It optimizes your content and serves the ideal bitrate to match your visitors’ needs. We use CDNs all over the planet to serve those precious bits as fast as possible. When you combine these features with Mux Player, you can easily customize the user experience. And you can trust that your video will play, no matter what device your visitors are on.

Okay, now that I’ve convinced you, let’s actually set this up.

First, I upload my videos to Mux. If you don’t already have an account, you can set one up here. I’ll be using the handy mux node cli, which connects with an Access Token generated from the Mux Dashboard. After that, I can upload as many videos as I want.

npx @mux/cli init
npx @mux/cli assets:upload ~/awesome-vid.mp4

After uploading my video, I’ll pass the Playback ID as a prop to <MuxPlayer /> to play it. Yes, that’s it.

<MuxPlayer playbackId="<PLAYBACK_ID>" />

Okay, cool, so it only takes one line of JSX to add video to a blog post, but all of my blog posts are written in markdown. How can I put this JSX into a markdown blog post?

Regular old markdown doesn’t support JSX, but MDX does. Markdown + JSX = MDX. And it turns out there are some pretty cool tools for adding support for MDX to your Next.js blog. My favorite option is mdx-bundler. Shoutout to Kent C. Dodds for creating it and being a prolific contributor to the React and web dev ecosystem.

Here’s a great tutorial for setting up mdx-bundler in Next.js: https://dipeshwagle.com/blog/use-mdx-bundler-next-js

Now that my blog supports .mdx files, I’ll refer to the Mux Player docs to install the player.

npm install @mux/mux-player-react@latest

Now Mux Player is installed, but every time I use it in an MDX file, I have to import it. Fortunately, mdx-bundler supports component substitution, which lets me pass MuxPlayer in once when <MDXComponent /> is rendered and use it in as many blog posts as I want.

Now, adding a video within a blog post is as easy as...

### Brilliant blog post
 
Wow, I've got some *really* important things to say, which this video does a great job of supporting.
 
<MuxPlayer playbackId="<PLAYBACK_ID>" />
 
Facts about that video
* Helpful
* Amazing
* Spectacular

Here’s a code example of Next.js + MDX + MuxPlayer.

That’s it. All the complexities of serving video on demand, tucked away behind Mux’s magical APIs. And all of the tedious minutiae of browser and device support packed into Mux Player.

Sorry if you were expecting this to take longer. Maybe now you can actually go write some blog posts. And add some super cool videos, too!