Ako pridať zoznam videí YouTube do aplikácie Next.js React pomocou rozhrania YouTube API

YouTube poskytuje tvorcom obsahu množstvo nástrojov na pridanie práce, aby ich mohli vidieť všetci. Tieto nástroje vám však pomôžu iba spravovať prostredie YouTube.

Ako môžeme použiť YouTube API na prenos nášho video obsahu na našu vlastnú webovú stránku?

  • YouTube má API?
  • Čo budeme stavať?
  • Krok 0: Začíname s Next.js
  • Krok 1: Vytvorenie projektu pre vývojárov Google
  • Krok 2: Vyžiadanie položiek zoznamu skladieb z rozhrania YouTube API
  • Krok 3: Zobrazenie videí so zoznamom videí YouTube na stránke

YouTube má API?

Áno! YouTube má spolu s mnohými ďalšími službami Google API, pomocou ktorého môžeme využívať výhody nášho obsahu mimo YouTube. A API je dosť rozsiahle.

S rozhraním API služby YouTube môžete robiť napríklad správu videí, prístup k analýzam a správu prehrávania. Použijeme ho však na získanie videí zo zoznamu skladieb, aby sme ich mohli pridať na stránku.

Čo budeme stavať?

Pripravíme aplikáciu Next.js, ktorá používa rozhranie YouTube API na načítanie videí zo zoznamu skladieb.

Zoberieme tieto videá a ich miniatúry zobrazíme na stránke, ktorá na video odkazuje.

Krok 0: Začíname s Next.js

Na roztočenie aplikácie použijeme program Next.js. Pomocou priadze alebo NPM môžeme ľahko vytvoriť novú aplikáciu, ktorá nám umožní ponoriť sa priamo do kódu.

Ak chcete začať, prejdite na miesto, kde chcete vytvoriť svoj projekt, a spustite program:

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

Tento skript vás vyzve na zadanie názvu projektu. Použijem zoznam „môj-youtube-playlist“ a nainštalujú sa všetky závislosti, ktoré sú potrebné na začiatok.

Potom prejdite do tohto adresára a spustením yarn devspustite svoj vývojový server. Sme pripravení vyraziť.

Postupujte spolu s potvrdením!

Krok 1: Vytvorenie projektu pre vývojárov Google

Aby sme mohli používať API, budeme v konzole pre vývojárov Google potrebovať nový projekt, ktorý nám umožní vygenerovať kľúč API na používanie služby.

Najskôr prejdite na: //console.developers.google.com/.

Keď tam budete a prihlásite sa pomocou svojho účtu Google, budeme chcieť vytvoriť nový projekt.

V tomto okamihu môžete pomenovať svoj projekt, ako chcete. Idem do zoznamu „Môj zoznam videí YouTube“. Potom kliknite na Vytvoriť.

Google vás predvolene do nového projektu nepustí. Spustí sa práca na vytvorení tohto projektu, ale po dokončení môžete otvoriť zálohovanie selektora projektu a vyberte nový projekt.

Ďalej chceme vytvoriť kľúč API. Prejdite na poverenia, kliknite na položku Vytvoriť poverenia a potom vyberte kľúč API.

Týmto sa vytvorí nový kľúč API, ktorý budete chcieť skopírovať a uložiť na neskôr.

Poznámka: Tento kľúč API by mal byť utajený. Ak to vystavíte alebo ich pridáte niekde na verejnosti, ako je GitHub, ostatní to môžu zneužiť a nechať vám zaplatiť účet.

Nakoniec musíme pridať API služby YouTube ako službu. Na bočnom paneli prejdite do knižnice , vyhľadajte výraz „YouTube“ a potom vyberte YouTube Data API v3 .

Nakoniec po načítaní stránky kliknite na možnosť Povoliť, čím sa dostanete na novú stránku informačného panela a budete pripravení.

Krok 2: Vyžiadanie položiek zoznamu skladieb z rozhrania YouTube API

Na vyžiadanie našich údajov použijeme funkciu getServerSideProps.

Najskôr otvorte pages/index.jssúbor a nad Homekomponent pridajte nasledujúce .

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

Robíme toto:

  • Vytvárame novú konštantu, ktorá uchováva náš koncový bod API
  • Vytvárame a exportujeme novú getServerSideProps  funkciu
  • Vo vnútri tejto funkcie načítame náš koncový bod
  • Potom to transformujeme na JSON
  • Nakoniec vrátime údaje ako rekvizity v našom objekte

Teraz, keď zničíme datarekvizitu z Homea konzolu, odhláste tieto údaje, napríklad:

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

Teraz vidíme, že sa nám zobrazuje chyba:

Nepoužívame náš kľúč API, takže ho využime.

Vytvorte nový súbor v koreňovom adresári projektu s názvom .env.locala pridajte nasledujúci obsah:

YOUTUBE_API_KEY="[API Key]" 

Uistite sa, že ste ich nahradili [API Key]kľúčom API z kroku 1.

V tomto okamihu budete chcieť reštartovať server, aby Next.js mohla vidieť novú premennú.

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