next-video

next-video lets Next.js applications import video files and render them through a React Video component. The automatic setup command installs the package, creates a /videos directory, updates the Next.js config and .gitignore, adds TypeScript import types, configures a watch-based sync script, and can prepare Mux credentials and a demo page. Manual setup uses withNextVideo in next.config, a video.d.ts type reference, and the next-video sync command. Turbopack users can configure an @videos path alias. Video source files are intended to be kept outside Git, while generated JSON asset metadata files are committed. The sync command uploads and processes local videos, can watch for new files during development, and creates mappings to remote assets. Remote video URLs can also be imported; for string URLs supplied at runtime, the package provides an optional /api/video request handler for both App and Pages routers. That route is unauthenticated by default and should be protected if exposed in production. Existing Mux assets can be adopted with next-video adopt using a playback ID, in either interactive or non-interactive mode. Mux is the default provider and offers off-repo storage, CDN delivery, HLS adaptation, automatic posters, timeline hover thumbnails, streaming format support, AI-generated captions, and video analytics. Other supported providers include Vercel Blob, Backblaze, Amazon S3, and Cloudflare R2, with different environment variables, configuration options, and feature sets; providers without video processing require web-compatible MP4 files. The player layer supports theme components from player.style, a player-only import, a lightweight background-video component, custom poster and blurDataURL props, a slotted poster element such as next/image, and fully custom players through the as prop. Asset metadata storage can also be customized by replacing the default JSON file load, save, and update hooks.