// the find
muxinc/next-video
The easiest way to add video in your Nextjs app.
next-video is a React component for Next.js that handles video optimization, upload, and playback through a file-system-based workflow. You drop MP4s in a `/videos` directory, run a sync command, and it uploads them to a backend provider (Mux by default) and gives you a `<Video>` component that just works. Built by the Mux team, so the default path is obviously Mux.
The import-based API (`import myVideo from '/videos/foo.mp4'`) is genuinely clever — it makes video assets first-class in the module graph and TypeScript gets types for them. The provider abstraction is real: Backblaze, S3, Cloudflare R2, and Vercel Blob all work, not just Mux. The asset storage hooks let you swap out the JSON file approach for a database without forking anything. The `adopt` CLI command for existing Mux assets is a thoughtful escape hatch that prevents re-upload headaches.
Mux gets all the features (HLS adaptive streaming, auto posters, timeline thumbnails, AI captions, analytics) while every other provider gets raw file hosting — the feature table makes this painfully clear. The Turbopack path alias requirement is a paper cut that trips up anyone upgrading Next.js since it recently became the default dev server. The `/api/video` handler is unauthenticated by default with only a README warning — in a real app you need to gate it, but the scaffolding doesn't help you do that. JSON files in the repo as the asset metadata store is workable for demos but becomes a coordination problem on teams or in CI.