Introdução
Nesse artigo vamos abordar a utilização da biblioteca react-player dentro do NextJS. Embora utilizar o componente parece ser muito simples, e realmente é, existem alguns truques que podemos adicionar no tratamento do código que fará com que sua aplicação tenha uma performance superior.
O NextJS nas últimas versões dele passa a renderizar todos os componentes e páginas primeiro do lado do servidor. Temos como controlar isso, claro, mas para o caso do nosso componente de react player, você pode ter problemas já que o componente precisa de javascript para funcionar.
Nos tópicos a seguir vamos abordar em detalhes como configurar o NextJS para receber o componente e quais tratamentos especiais podemos fazer para que o componente se comporta da melhor maneira possível na hora de reproduzir o conteúdo.
O que é o react player
O React Player é uma biblioteca para React que simplifica a incorporação e o controle de vídeos em uma aplicação. Ela oferece uma maneira fácil de integrar vídeos de várias fontes, incluindo YouTube, Vimeo, Facebook, e até arquivos locais, sem a necessidade de lidar diretamente com as APIs desses serviços.
Principais vantagens
Incorporar vídeos de múltiplas plataformas com uma única API.
Customizar o player com várias opções de configuração.
Controlar a reprodução com funções como play, pause e seek.
Manipular eventos de vídeo, como fim de reprodução e mudanças no estado.
Configuração do ambiente
Para começarmos, vamos configurar o ambiente do NextJS, vamos utilizar as recomendações da própria documentação do NextJS para iniciar o projeto básico.
Siga o passo a passo da documentação oficial do nextjs para começar um projeto:
Criação do projeto - Documentação oficial NextJS
Depois que o projeto estiver iniciado, vamos rodar o projeto para nos certificar de que tudo está funcionando bem.
Adicionalmente, recomendo que você limpe os arquivos desnecessários para ter uma instalação limpa, se tiver dúvida de como fazer isso, no vídeo a seguir mostro como limpar a estrutura do NextJS.
NextJS, TailwindCSS e Typescript - Removendo arquivos desnecessários
Instalação do react player
Com o projeto todo configurado vamos ao que interessa de fato, vamos instalar o react-player no projeto.
1. Primeiro, vamos instalar a biblioteca no projeto, para isso use o gerenciador de pacotes da sua preferência:
Usando o react-player
Esse é o momento que vou te passar a dica mais importante desse artigo. A maneira correta de se utilizar o react player dentro do NextJS é utilizando importes dinâmicos. Você certamente já ouviu falar que no NextJS tudo é renderizado do lado do servidor como o famoso “SSR”, sigla para o inglês “Server Side Rendering”, pois bem, tendo isso em mente você certamente terá problemas ao utilizar o componente com um simples import normal.
Para resolver o problema existem algumas coisas que vamos precisar fazer. Primeiro precisaremos adicionar no topo da página a diretiva do NextJS o “use client”, isso fará com que a tela ou o componente específico seja hidratado no navegador. O termo “hidratado” se refere que ao ser exibido na tela do navegador aquela parte da tela terá o javascript carregado, o que não acontece por padrão. Em segundo lugar, vamos precisar utilizar o import dinâmico do NextJS. O import dinâmico ou “dynamic” é utilizado para personalizar a maneira como o nosso componente é importado na tela. Com isso conseguiremos remover todos os erros de utilização do componente.
Veja o exemplo abaixo de como fica o nosso import:
Veja na imagem acima que temos uma propriedade a mais no dynamic. O ssr: false serve para informar ao NextJS que o import deve acontecer apenas no frontend.
No exemplo a seguir você verá como fica a utilização do componente depois de importado.
Agora sim, tudo está pronto para você testar no seu navegador, além disso fique atento para deixar a url do vídeo dynamic, dessa forma você consegue reproduzir qualquer vídeo público do youtube.
Conclusão
Podemos ver que utilizar o ReactPlayer é muito simples, e com as configurações adequadas ele funcionará muito bem inclusive dentro do NextJS.
Caso você tenha ficado com alguma dúvida sobre a utilização do componente, você pode me assistir o vídeo abaixo, eu mostrei passo a passo como usar o componente dentro do NextJS e ainda como criar uma plataforma de cursos completa baseada nos conteúdos do YouTube.
Agradeço muito por ter chegado até aqui, se gostou do conteúdo não deixe compartilhar o artigo. Comenta aqui embaixo também sobre que outro tópico você gostaria que eu escrevesse. Nos vemos na próxima, até mais!
Comentários
Postar um comentário