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

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

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

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

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 }  }
}