Cómo agregar una lista de reproducción de YouTube a una aplicación Next.js React con la API de YouTube

YouTube ofrece a los creadores de contenido un montón de herramientas para agregar su trabajo para que todos lo vean. Pero esas herramientas solo lo ayudan a administrar la experiencia en YouTube.

¿Cómo podemos utilizar la API de YouTube para llevar nuestro contenido de video a nuestro propio sitio web?

  • ¿YouTube tiene una API?
  • ¿Qué vamos a construir?
  • Paso 0: Empezando con Next.js
  • Paso 1: creación de un proyecto de desarrollador de Google
  • Paso 2: solicitar elementos de la lista de reproducción de la API de YouTube
  • Paso 3: Mostrar videos de la lista de reproducción de YouTube en la página

¿YouTube tiene una API?

¡Sip! YouTube, junto con muchos otros servicios de Google, tiene una API que podemos usar para aprovechar nuestro contenido fuera de YouTube. Y la API es bastante extensa.

Con la API de YouTube, puede hacer cosas como administrar sus videos, acceder a análisis y administrar la reproducción. Pero lo usaremos para tomar videos de una lista de reproducción para que podamos agregarlos a una página.

¿Qué vamos a construir?

Vamos a armar una aplicación Next.js que usa la API de YouTube para buscar videos de una lista de reproducción.

Tomaremos esos videos y mostraremos sus miniaturas en una página que enlaza con el video.

Paso 0: Empezando con Next.js

Para activar una aplicación, usaremos Next.js. Usando yarn o npm, podemos crear fácilmente una nueva aplicación que nos permitirá sumergirnos directamente en el código.

Entonces, para comenzar, navegue hasta donde desea crear su proyecto y ejecute:

yarn create next-app # or npx create-next-app 

Ese script le pedirá un nombre de proyecto. Voy a usar “my-youtube-playlist” e instalará todas las dependencias necesarias para comenzar.

Luego navegue a ese directorio y ejecute yarn devpara iniciar su servidor de desarrollo y estamos listos para comenzar.

¡Sigue el compromiso!

Paso 1: creación de un proyecto de desarrollador de Google

Para usar la API, necesitaremos un nuevo proyecto en la consola de desarrollador de Google que nos permitirá generar una clave de API para usar el servicio.

Primero, diríjase a: //console.developers.google.com/.

Una vez allí e iniciado sesión con su cuenta de Google, queremos crear un nuevo proyecto.

En este punto, puede nombrar su proyecto como desee. Voy con "Mi lista de reproducción de YouTube". Luego haga clic en Crear.

De forma predeterminada, Google no lo incluirá en el nuevo proyecto. Inicia un trabajo para crear ese proyecto, pero una vez que finaliza, puede abrir una copia de seguridad del selector de proyectos y seleccionar su nuevo proyecto.

A continuación, queremos crear una clave API. Vaya a Credenciales, haga clic en Crear credenciales y luego seleccione la clave API.

Esto creará una nueva clave de API que querrá copiar y guardar para más adelante.

Nota: Esta clave de API debe mantenerse en secreto. Si expone esto o lo agrega en algún lugar disponible para el público como GitHub, otros pueden abusar de él y dejarlo con una factura que pagar.

Finalmente, necesitamos agregar la API de YouTube como servicio. Vaya a Biblioteca en la barra lateral, busque "YouTube" y luego seleccione YouTube Data API v3 .

Finalmente, después de que se cargue la página, haga clic en Habilitar, lo que lo llevará a una nueva página de panel y estará listo para comenzar.

Paso 2: solicitar elementos de la lista de reproducción de la API de YouTube

Para solicitar nuestros datos, usaremos la función getServerSideProps.

Primero, abra el pages/index.jsarchivo y agregue lo siguiente encima del Homecomponente.

const YOUTUBE_PLAYLIST_ITEMS_API = '//www.googleapis.com/youtube/v3/playlistItems'; export async function getServerSideProps() { const res = await fetch(`${YOUTUBE_PLAYLIST_ITEMS_API}`) const data = await res.json(); return { props: { data } } } 

Esto es lo que estamos haciendo:

  • Estamos creando una nueva constante que almacena nuestro punto final de API
  • Estamos creando y exportando una nueva getServerSideProps  función
  • Dentro de esa función, buscamos nuestro punto final
  • Luego transformamos eso a JSON
  • Finalmente, devolvemos los datos como accesorios en nuestro objeto.

Ahora, si desestructuramos el dataaccesorio Homey la consola, desconectamos esos datos como se muestra a continuación:

export default function Home({ data }) { console.log('data', data); 

Ahora podemos ver que obtenemos un error:

No estamos usando nuestra clave API, así que usémosla.

Cree un nuevo archivo en la raíz del proyecto llamado .env.localy agregue el siguiente contenido:

YOUTUBE_API_KEY="[API Key]" 

Asegúrese de reemplazarla [API Key]con su clave API del paso 1.

En este punto, querrá reiniciar su servidor para que Next.js pueda ver la nueva variable.

Now, update the getServerSideProps function to add your key to the API request:

export async function getServerSideProps() { const res = await fetch(`${YOUTUBE_PLAYLIST_ITEMS_API}?key=${process.env.YOUTUBE_API_KEY}`) 

And if we reload the page, again, we get an error:

Now, we’re missing the playlist ID and the filters we want to grab our data.

Using the parameters from the playlist items API, let’s update our API endpoint again:

const res = await fetch(`${YOUTUBE_PLAYLIST_ITEMS_API}?part=snippet&maxResults=50&playlistId=[Playlist ID]&key=${process.env.YOUTUBE_API_KEY}`) 

Here, we’re adding:

  • part=snippet: this tells the API we want the snippet
  • maxResults=50: this sets the maximum number of playlist items that get returned to 50
  • playlistId=[Playlist ID]: this adds the parameter to configure the playlist ID. Here, you should update that value to the playlist ID of your choice.

Note: you can find the playlist ID in the URL of the playlist you want to use.

And finally, when we reload the page, we have our data:

Follow along with the commit!

Step 3: Showing YouTube playlist videos on the page

Now that we have our data, we want to display it.

To make use of what we already have from Next.js, we can transform the existing grid into a grid of YouTube thumbnails.

Let’s replace the entire with the className of styles.grid to:


    
    {data.items.map(({ id, snippet = {} }) => { const { title, thumbnails = {}, resourceId = {} } = snippet; const { medium } = thumbnails; return (
  • { title }

  • ) })}

Here’s what we’re doing:

  • We’re changing the to a
      so it’s more semantic
    • We create a map through the items of our playlist to dynamically create new items
    • We’re destructuring our data grabbing the id, title, thumbnail, and video ID
    • Using the ID, we add a key to our
    • We also move the className of styles.card  from the to the
    • For our link, we use the YouTube video ID to create the video URL
    • We add our thumbnail image
    • We use our title for the

    And if we reload the page, we can see that our videos are there, but the styles are a bit off.

    To fix this, we can start by adding the following styles to .grid inside of the Home.module.css file:

    list-style: none; padding: 0; margin-left: 0; 

    We can also change

    align-items: center; 

    to

    align-items: flex-start; 

    which will help fix the alignment of our videos.

    But we’ll notice we still don’t have two columns like the original Next.js layout.

    Under our .grid class that we just updated, add the following:

    .grid img { max-width: 100%; } 

    This makes sure all of our images don’t exceed the container. This will prevent the overflow and will let our images settle in to two columns.

    And that gives us our playlist videos.

    Follow along with the commit!

    What else can we do?

    Embed a player and show that video on click

    YouTube also gives controls for their own player. So using some JavaScript, we can take advantage and when someone clicks one of our video thumbnails, we can show an embedded player and play that video.

    YouTube Player API Reference for iframe Embeds

    Get analytics data

    While YouTube provides some analytics in its dashboard, maybe you want something more advanced.

    You can use the Analytics and Reporting APIs to get more insight into your channel and videos.

    YouTube Analytics and Reporting APIs

    Follow me for more Javascript, UX, and other interesting things!

    • ? Follow Me On Twitter
    • ?️ Subscribe To My Youtube
    • ✉️ Sign Up For My Newsletter