muxinc/next-video

O que é?

Recursos principais

• 01Sincroniza arquivos de vídeo locais com um armazenamento remoto e os processa automaticamente com o comando de sincronização.
• 02Mantém arquivos de vídeo grandes fora do git, enquanto acompanha pequenos arquivos de metadados JSON.
• 03Oferece suporte a Mux, Vercel Blob, Backblaze, Amazon S3 e Cloudflare R2 como provedores.
• 04Oferece posters de placeholder automáticos e miniaturas da linha do tempo ao passar o cursor com o Mux.
• 05Oferece temas personalizáveis para o player e um espaço para inserir um componente de player próprio.
• 06Inclui um player independente e um componente de vídeo de fundo.

Casos de uso

• Hospedar vídeos de marketing ou de produtos em um site Next.js sem enviar arquivos de mídia para o repositório.
• Adicionar uma seção hero com vídeo de fundo e sem controles do player.
• Incorporar vídeos que precisam de streaming adaptativo e legendas via Mux.
• Migrar uma hospedagem de vídeos existente em S3 ou R2 para um fluxo de build do Next.js.

Início rápido

1. 1

   Execute a configuração automática na raiz do seu projeto Next.js

   npx -y next-video init
2. 2

   Adicione seu token de acesso do Mux ao .env.local

3. 3

   Adicione um vídeo a /videos e sincronize-o com o armazenamento remoto

   npx next-video sync
4. 4

   Inicie o servidor de desenvolvimento e abra a página de demonstração

   npm run dev

Antes de usar

• !O armazenamento remoto e a otimização padrão exigem uma conta Mux e um token de acesso.
• !A rota /api/video não exige autenticação por padrão e deve ser protegida em produção.

Tópicos

Perguntas frequentes

O que é next-video?

Componente React para adicionar vídeos a apps Next.js, com upload, otimização e entrega por CDN automáticos via Mux ou outros provedores de armazenamento. next-video é um componente React que amplia o elemento de vídeo nativo para projetos Next.js. Você coloca os arquivos de vídeo em uma pasta local /videos, e o comando de sincronização os envia para um armazenamento remoto e os processa, mantendo arquivos de mídia grandes fora do seu repositório git. As importações de arquivos de vídeo são resolvidas como objetos de assets que o componente Video pode reproduzir diretamente.

next-video é gratuito? Qual é a licença?

next-video é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.

next-video ainda é mantido?

Manutenção ativa. O último commit de next-video foi em 3 de nov. de 2026.

Para que posso usar next-video?

Hospedar vídeos de marketing ou de produtos em um site Next.js sem enviar arquivos de mídia para o repositório. Adicionar uma seção hero com vídeo de fundo e sem controles do player. Incorporar vídeos que precisam de streaming adaptativo e legendas via Mux. Migrar uma hospedagem de vídeos existente em S3 ou R2 para um fluxo de build do Next.js.

Como instalar next-video?

Execute a configuração automática na raiz do seu projeto Next.js: npx -y next-video init Adicione seu token de acesso do Mux ao .env.local Adicione um vídeo a /videos e sincronize-o com o armazenamento remoto: npx next-video sync Inicie o servidor de desenvolvimento e abra a página de demonstração: npm run dev

Onde consigo next-video?

O código-fonte e as instruções de instalação estão no GitHub: https://github.com/muxinc/next-video