How I wire Mux video into a Next.js + Sanity CMS upload workflow

npm install sanity-plugin-mux-input

// sanity.config.ts
import { defineConfig } from 'sanity'
import { muxInput } from 'sanity-plugin-mux-input'

export default defineConfig({
  name: 'default',
  title: 'My Studio',
  projectId: process.env.SANITY_STUDIO_PROJECT_ID!,
  dataset: process.env.SANITY_STUDIO_DATASET!,
  plugins: [
    muxInput({
      mp4_support: 'standard', // enables downloadable MP4 fallback
    }),
  ],
  // ... schema, structure
})

// schemas/post.ts
import { defineField, defineType } from 'sanity'

export default defineType({
  name: 'post',
  type: 'document',
  fields: [
    defineField({ name: 'title', type: 'string' }),
    defineField({
      name: 'video',
      title: 'Video',
      type: 'mux.video', // registered by the plugin
    }),
  ],
})

// app/api/mux-upload/route.ts
import { NextResponse } from 'next/server'
import Mux from '@mux/mux-node'

const mux = new Mux({
  tokenId: process.env.MUX_TOKEN_ID!,
  tokenSecret: process.env.MUX_TOKEN_SECRET!,
})

export async function POST() {
  const upload = await mux.video.uploads.create({
    new_asset_settings: {
      playback_policy: ['signed'], // use 'public' if you do not need signed URLs
      mp4_support: 'standard',
    },
    cors_origin: process.env.NEXT_PUBLIC_SITE_URL!,
  })

  return NextResponse.json({ uploadUrl: upload.url, uploadId: upload.id })
}

// app/posts/[slug]/page.tsx
import Mux from '@mux/mux-node'
import MuxPlayer from '@mux/mux-player-react'

const mux = new Mux({
  tokenId: process.env.MUX_TOKEN_ID!,
  tokenSecret: process.env.MUX_TOKEN_SECRET!,
})

async function signToken(
  playbackId: string,
  audience: 'v' | 't' | 'g' | 's',
) {
  return mux.jwt.signPlaybackId(playbackId, {
    type: audience,
    expiration: '12h',
    // add keyId / keySecret from MUX_SIGNING_KEY_ID / MUX_SIGNING_PRIVATE_KEY
    keyId: process.env.MUX_SIGNING_KEY_ID!,
    keySecret: process.env.MUX_SIGNING_PRIVATE_KEY!,
  })
}

export default async function PostPage({ params }: { params: { slug: string } }) {
  // ... fetch Sanity doc, get playbackId
  const playbackId = 'YOUR_PLAYBACK_ID'

  const [videoToken, thumbnailToken] = await Promise.all([
    signToken(playbackId, 'v'),
    signToken(playbackId, 't'),
  ])

  const posterUrl =
    `https://image.mux.com/${playbackId}/thumbnail.webp` +
    `?token=${thumbnailToken}&time=3&width=1280&height=720&fit_mode=smartcrop`

  return (
    <main>
      {/* Preload the poster so it contributes to LCP immediately */}
      <link rel="preload" as="image" href={posterUrl} />
      <MuxPlayer
        playbackId={playbackId}
        tokens={{ playback: videoToken, thumbnail: thumbnailToken }}
        poster={posterUrl}
        streamType="on-demand"
        style={{ aspectRatio: '16/9', width: '100%' }}
      />
    </main>
  )
}

// app/api/mux-webhook/route.ts
import { NextRequest, NextResponse } from 'next/server'
import { createClient } from '@sanity/client'
import { verifyWebhookSignature } from '@mux/mux-node'

const sanity = createClient({
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!,
  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET!,
  token: process.env.SANITY_API_WRITE_TOKEN!,
  useCdn: false,
  apiVersion: '2024-01-01',
})

export async function POST(req: NextRequest) {
  const body = await req.text()
  const sig = req.headers.get('mux-signature') ?? ''

  const isValid = verifyWebhookSignature(body, sig, process.env.MUX_WEBHOOK_SECRET!)
  if (!isValid) return new NextResponse('Unauthorized', { status: 401 })

  const event = JSON.parse(body)
  if (event.type !== 'video.asset.ready') return NextResponse.json({ ok: true })

  const { id: assetId, playback_ids } = event.data
  const playbackId = playback_ids?.[0]?.id

  if (playbackId) {
    // Patch the Sanity document that references this asset
    // You need to store assetId -> Sanity doc ID mapping at upload time
    await sanity.patch('SANITY_DOC_ID').set({ 'video.asset.playbackId': playbackId }).commit()
  }

  return NextResponse.json({ ok: true })
}