¿Cómo agregar videos de Youtube en Next.js?

En este artículo, vamos a aprender cómo podemos agregar videos de Youtube en NextJs. NextJS es un marco basado en React. Tiene el poder de desarrollar hermosas aplicaciones web para diferentes plataformas como Windows, Linux y Mac. La vinculación de rutas dinámicas ayuda a representar sus componentes NextJS de forma condicional.

Enfoque: para agregar nuestro video de Youtube, vamos a usar el paquete react-youtube. El paquete react-youtube nos ayuda a agregar videos de Youtube en cualquier lugar de nuestra aplicación. Primero, instalaremos el paquete react-youtube y luego agregaremos un video de youtube en nuestra página de inicio.

Crear aplicación NextJS: puede crear un nuevo proyecto NextJs usando el siguiente comando:

npx create-next-app gfg

Instale el paquete requerido: ahora instalaremos el paquete react-youtube usando el siguiente comando:

npm i react-youtube

Estructura del proyecto: Se verá así.

Agregar el video de Youtube: podemos agregar fácilmente los videos de Youtube en nuestra aplicación después de instalar el paquete de reacción-youtube. Para este ejemplo, vamos a agregar un resaltador de texto a nuestra página de inicio.

Agregue el siguiente contenido en el archivo index.js :

import React from "react";
import YouTube from "react-youtube";
  
export default class YoutubeVideo 
extends React.Component {
  render() {
    const opts = {
      height: "390",
      width: "640",
      playerVars: {
        autoplay: 1,
      },
    };
  
    return (
      <div>
        <h3>GeeksforGeeks - Youtube</h3>
        <YouTube videoId="sTnm5jvjgjM" 
            opts={opts} onReady={this._onReady} />
      </div>
    );
  }
  
  _onReady(event) {
    event.target.pauseVideo();
  }
}

Explicación: en el ejemplo anterior primero, estamos importando el componente de Youtube del paquete instalado. Después de eso, estamos creando una nueva variable constante para almacenar la configuración del reproductor de video. Luego estamos agregando nuestro ID de video y opciones a nuestro componente de Youtube. Puede encontrar el videoId en el enlace del video de youtube.

Pasos para ejecutar la aplicación: Ejecute el siguiente comando en la terminal para ejecutar la aplicación.

npm run dev

Producción: