Hogyan adhatunk YouTube lejátszási listát a Next.js React alkalmazáshoz a YouTube API-val

A YouTube rengeteg eszközt ad a tartalomkészítőknek, hogy munkájukat mindenki láthassa. De ezek az eszközök csak a YouTube-élmény kezelésében segítenek.

Hogyan használhatjuk a YouTube API-t arra, hogy videotartalmainkat saját webhelyünkre vigyük?

  • A YouTube rendelkezik API-val?
  • Mit fogunk építeni?
  • 0. lépés: A Next.js használatának megkezdése
  • 1. lépés: Google Developer projekt létrehozása
  • 2. lépés: Lejátszási listaelemek kérése a YouTube API-tól
  • 3. lépés: YouTube lejátszási lista videók megjelenítése az oldalon

A YouTube rendelkezik API-val?

Aha! A YouTube és sok más Google-szolgáltatás együtt rendelkezik egy API-val, amelynek segítségével tartalmainkat a YouTube-on kívül is kihasználhatjuk. És az API elég kiterjedt.

A YouTube API-jával olyan dolgokat tehet, mint a videók kezelése, az elemzések elérése és a lejátszás kezelése. De arra fogjuk használni, hogy videókat ragasszunk le egy lejátszási listáról, hogy felvegyük őket egy oldalra.

Mit fogunk építeni?

Összeállítunk egy Next.js alkalmazást, amely a YouTube API-t használja videók lekérésére egy lejátszási listáról.

Mi elkészítjük ezeket a videókat, és a bélyegképeiket megjelenítjük egy olyan oldalon, amely a videóra mutat.

0. lépés: A Next.js használatának megkezdése

Egy alkalmazás felpörgetéséhez a Next.js fájlt fogjuk használni. A fonal vagy az npm használatával könnyen létrehozhatunk egy új alkalmazást, amely lehetővé teszi, hogy közvetlenül a kódba merüljünk.

Tehát a kezdéshez keresse meg azt a helyet, ahol létre szeretné hozni a projektet, és futtassa:

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

Ez a szkript kéri a projekt nevét. A „my-youtube-playlist” fájlt fogom használni, és telepíti az induláshoz szükséges összes függőséget.

Ezután keresse meg azt a könyvtárat, és futtassa yarn deva fejlesztőkiszolgáló elindításához, és készen állunk az indulásra.

Kövesse az elkötelezettséggel együtt!

1. lépés: Google Developer projekt létrehozása

Az API használatához szükségünk lesz egy új projektre a Google Developer konzolban, amely lehetővé teszi számunkra, hogy API-kulcsot hozzunk létre a szolgáltatás használatához.

Először lépjen a következő webhelyre: //console.developers.google.com/.

Miután odaért és bejelentkezett a Google-fiókjával, új projektet szeretnénk létrehozni.

Ezen a ponton megnevezheti projektjét, amit csak szeretne. A „Saját YouTube lejátszási listám” -mal megyek. Ezután kattintson a Létrehozás gombra.

Alapértelmezés szerint a Google nem dobja be az új projektbe. Feladatot indít a projekt létrehozására, de miután befejezte, megnyithatja a projektválasztót, és kiválaszthatja az új projektet.

Ezután egy API kulcsot szeretnénk létrehozni. Keresse meg a Hitelesítő adatok elemet, kattintson a Hitelesítő adatok létrehozása elemre, majd válassza az API kulcsot.

Ez létrehoz egy új API-kulcsot, amelyet másolni és későbbre menteni szeretne.

Megjegyzés: Ezt az API-kulcsot titokban kell tartani. Ha ezt kiteszi, vagy valahol a nyilvánosság számára elérhetővé teszi, például a GitHubhoz, mások visszaélhetnek vele, és fizetési számlát hagyhatnak Önnek.

Végül hozzá kell adnunk a YouTube API-t szolgáltatásként. Keresse meg az oldalsáv Könyvtár elemét, keressen rá a „YouTube” kifejezésre, majd válassza a YouTube Data API v3 lehetőséget .

Végül az oldal betöltése után kattintson az Engedélyezés gombra, amely egy új irányítópult oldalra jut, és készen áll az indulásra.

2. lépés: Lejátszási listaelemek kérése a YouTube API-tól

Adataink igényléséhez a getServerSideProps függvényt fogjuk használni.

Először nyissa meg a pages/index.jsfájlt, és adja hozzá a következőt az Homeösszetevő fölé .

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

Ezt csináljuk:

  • Új állandót hozunk létre, amely tárolja az API végpontunkat
  • Új getServerSideProps  funkciót hozunk létre és exportálunk
  • A függvényen belül lekérjük a végpontunkat
  • Ezt követően átalakítjuk JSON-ra
  • Végül az adatokat objektumként kellékként visszaküldjük

Most, ha megsemmisítjük a datakelléket a Homekonzolból , és a konzol kijelentkeztetjük ezeket az adatokat, például a következőket:

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

Most láthatjuk, hogy hibát kapunk:

Nem az API kulcsunkat használjuk, ezért használjuk ezt.

Hozzon létre egy új fájlt a projekt gyökérkönyvtárában, .env.localés adja hozzá a következő tartalmat:

YOUTUBE_API_KEY="[API Key]" 

Győződjön meg arról, hogy [API Key]az 1. lépésben cserélte le az API kulcsát.

Ezen a ponton újra kell indítania a szervert, hogy a Next.js láthassa az új változót.

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