Sådan tilføjes en YouTube-afspilningsliste til en Next.js React-app med YouTube API

YouTube giver indholdsskabere masser af værktøjer til at tilføje deres arbejde, så alle kan se. Men disse værktøjer hjælper dig kun med at styre oplevelsen på YouTube.

Hvordan kan vi bruge YouTube API til at bringe vores videoindhold til vores eget websted?

  • YouTube har en API?
  • Hvad skal vi bygge?
  • Trin 0: Kom godt i gang med Next.js
  • Trin 1: Oprettelse af et Google-udviklerprojekt
  • Trin 2: Anmodning om playlisteelementer fra YouTube API
  • Trin 3: Viser YouTube-afspilningslistevideoer på siden

YouTube har en API?

Jep! YouTube har sammen med mange andre Google-tjenester en API, som vi kan bruge til at udnytte vores indhold på måder uden for YouTube. Og API'en er ret omfattende.

Med YouTubes API kan du gøre ting som at styre dine videoer, få adgang til analyser og styre afspilning. Men vi skal bruge det til at hente videoer fra en playliste, så vi kan føje dem til en side.

Hvad skal vi bygge?

Vi sammensætter en Next.js-app, der bruger YouTube API til at hente videoer fra en playliste.

Vi tager disse videoer, og vi viser deres miniaturer på en side, der linker til videoen.

Trin 0: Kom godt i gang med Next.js

For at spinde en app op skal vi bruge Next.js. Ved hjælp af garn eller npm kan vi nemt oprette en ny app, der lader os dykke lige ind i koden.

Så for at komme i gang skal du navigere til det sted, hvor du vil oprette dit projekt og køre:

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

Dette script beder dig om et projektnavn. Jeg vil bruge “min-youtube-playliste”, og den installerer alle de afhængigheder, der er nødvendige for at komme i gang.

Naviger derefter til den mappe, og kør for yarn devat starte din udviklingsserver, så er vi klar til at gå.

Følg med på forpligtelsen!

Trin 1: Oprettelse af et Google-udviklerprojekt

For at bruge API'en har vi brug for et nyt projekt i Google Developer-konsollen, der giver os mulighed for at generere en API-nøgle til at bruge tjenesten.

Gå først til: //console.developers.google.com/.

Når du er der og logget ind med din Google-konto, vil vi oprette et nyt projekt.

På dette tidspunkt kan du navngive dit projekt, hvad du vil. Jeg går med "Min YouTube-afspilningsliste". Klik derefter på Opret.

Som standard slipper Google dig ikke ind i det nye projekt. Det starter et job for at oprette dette projekt, men når det er færdigt, kan du åbne sikkerhedskopien af ​​projektvælgeren og vælge dit nye projekt.

Dernæst vil vi oprette en API-nøgle. Naviger til legitimationsoplysninger, klik på Opret legitimationsoplysninger, og vælg derefter API-nøgle.

Dette opretter en ny API-nøgle, som du vil kopiere og gemme til senere.

Bemærk: Denne API-nøgle skal holdes hemmelig. Hvis du udsætter dette eller tilføjer det et sted, der er tilgængeligt for offentligheden som GitHub, kan andre misbruge det og efterlade dig en regning at betale.

Endelig er vi nødt til at tilføje YouTube API som en tjeneste. Naviger til Bibliotek i sidepanelet, søg efter "YouTube", og vælg derefter YouTube Data API v3 .

Endelig efter at siden er indlæst, skal du klikke på Aktiver, som fører dig til en ny dashboard-side, og du er klar til at gå.

Trin 2: Anmodning om playlisteelementer fra YouTube API

For at anmode om vores data skal vi bruge getServerSideProps-funktionen.

Åbn først pages/index.jsfilen og tilføj følgende over Homekomponenten.

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

Her er hvad vi laver:

  • Vi opretter en ny konstant, der gemmer vores API-slutpunkt
  • Vi opretter og eksporterer en ny getServerSideProps  funktion
  • Inde i denne funktion henter vi vores slutpunkt
  • Vi omdanner det derefter til JSON
  • Endelig returnerer vi dataene som rekvisitter i vores objekt

Hvis vi destruerer datapropellen fra Homeog konsollen, logger vi ud af disse data som følger:

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

Vi kan nu se, at vi får en fejl:

Vi bruger ikke vores API-nøgle, så lad os bruge det.

Opret en ny fil i roden til det kaldte projekt, .env.localog tilføj følgende indhold:

YOUTUBE_API_KEY="[API Key]" 

Sørg for at udskifte [API Key]med din API-nøgle fra trin 1.

På dette tidspunkt vil du genstarte din server, så Next.js kan se den nye variabel.

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