Як додати список відтворення YouTube до програми Next.js React за допомогою API YouTube

YouTube надає творцям вмісту купу інструментів, щоб додати свою роботу, щоб її бачили всі. Але ці інструменти лише допомагають вам керувати взаємодією на YouTube.

Як ми можемо використовувати API YouTube для розміщення нашого відеовмісту на власному веб-сайті?

  • YouTube має API?
  • Що ми будемо будувати?
  • Крок 0: Початок роботи з Next.js
  • Крок 1. Створення проекту розробника Google
  • Крок 2. Запит на елементи списку відтворення з API YouTube
  • Крок 3: Відображення відео зі списком відтворення YouTube на сторінці

YouTube має API?

Так! YouTube, поряд з багатьма іншими сервісами Google, має API, який ми можемо використовувати, щоб скористатися перевагами нашого вмісту поза межами YouTube. І API досить великий.

За допомогою API YouTube ви можете робити такі речі, як керування відео, доступ до аналітики та керування відтворенням. Але ми будемо використовувати його для вилучення відео зі списку відтворення, щоб ми могли додати їх на сторінку.

Що ми будемо будувати?

Ми збираємося створити додаток Next.js, який використовує API YouTube для отримання відео зі списку відтворення.

Ми візьмемо ці відео і покажемо їх мініатюри на сторінці, яка посилається на відео.

Крок 0: Початок роботи з Next.js

Щоб закрутити програму, ми будемо використовувати Next.js. Використовуючи пряжу або npm, ми можемо легко створити новий додаток, який дозволить нам зануритися прямо в код.

Отже, для початку перейдіть туди, де ви хочете створити свій проект, і запустіть:

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

Цей сценарій запропонує вам вказати назву проекту. Я збираюся використати “my-youtube-playlist”, і він встановить усі залежності, необхідні для початку роботи.

Потім перейдіть до цього каталогу та запустіть, yarn devщоб запустити сервер розробки, і ми готові до роботи.

Слідуйте разом із комітом!

Крок 1. Створення проекту розробника Google

Для використання API нам знадобиться новий проект на консолі розробника Google, який дозволить нам створити ключ API для використання служби.

Спочатку перейдіть на сторінку: //console.developers.google.com/.

Опинившись і увійшовши з вашим обліковим записом Google, ми хочемо створити новий проект.

На даний момент ви можете назвати свій проект як завгодно. Я беру участь у "Моєму списку відтворення YouTube". Потім натисніть Створити.

За замовчуванням Google не включає вас до нового проекту. Для початку цього проекту починається робота, але як тільки вона закінчиться, ви можете відкрити резервну копію селектора проекту та вибрати свій новий проект.

Далі ми хочемо створити ключ API. Перейдіть до облікових даних, натисніть Створити облікові дані, а потім виберіть ключ API.

Це створить новий ключ API, який ви захочете скопіювати та зберегти для подальшого використання.

Примітка: Цей ключ API слід тримати в секреті. Якщо ви виставите це або додасте десь доступно для громадськості, як-от GitHub, інші можуть зловживати ним і залишити вам рахунок для оплати.

Нарешті, нам потрібно додати API YouTube як послугу. Перейдіть до Бібліотеки на бічній панелі, знайдіть “YouTube”, а потім виберіть YouTube Data API v3 .

Нарешті, після завантаження цієї сторінки натисніть Увімкнути, що відкриє нову сторінку інформаційної панелі, і ви будете готові до роботи.

Крок 2. Запит на елементи списку відтворення з API YouTube

Для запиту наших даних ми будемо використовувати функцію getServerSideProps.

Спочатку відкрийте pages/index.jsфайл і додайте наступне над Homeкомпонентом.

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 } } } 

Ось що ми робимо:

  • Ми створюємо нову константу, яка зберігає нашу кінцеву точку API
  • Ми створюємо та експортуємо нову getServerSideProps  функцію
  • Усередині цієї функції ми отримуємо свою кінцеву точку
  • Потім ми перетворюємо це на JSON
  • Нарешті, ми повертаємо дані як реквізит у нашому об’єкті

Тепер, якщо ми деструктуруємо dataprop з Homeі консолі, вийдемо з цих даних, як показано нижче:

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

Тепер ми можемо бачити, що ми отримуємо помилку:

Ми не використовуємо наш ключ API, тому давайте використаємо його.

Створіть новий файл у кореневій частині проекту з назвою .env.localта додайте такий вміст:

YOUTUBE_API_KEY="[API Key]" 

Переконайтеся, що замінили [API Key]ваш ключ API із кроку 1.

На цьому етапі вам потрібно буде перезапустити сервер, щоб Next.js міг побачити нову змінну.

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:

Original text


  • 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