Hinzufügen einer YouTube-Wiedergabeliste zu einer Next.js React-App mit der YouTube-API

YouTube bietet Content-Erstellern eine Vielzahl von Tools, mit denen sie ihre Arbeit für alle sichtbar hinzufügen können. Mit diesen Tools können Sie jedoch nur die Erfahrung auf YouTube verwalten.

Wie können wir die YouTube-API verwenden, um unsere Videoinhalte auf unsere eigene Website zu bringen?

  • YouTube hat eine API?
  • Was werden wir bauen?
  • Schritt 0: Erste Schritte mit Next.js
  • Schritt 1: Erstellen eines Google Developer-Projekts
  • Schritt 2: Anfordern von Wiedergabelistenelementen über die YouTube-API
  • Schritt 3: Anzeigen von YouTube-Wiedergabelistenvideos auf der Seite

YouTube hat eine API?

Jep! YouTube verfügt zusammen mit vielen anderen Google-Diensten über eine API, mit der wir unsere Inhalte auch außerhalb von YouTube nutzen können. Und die API ist ziemlich umfangreich.

Mit der YouTube-API können Sie beispielsweise Ihre Videos verwalten, auf Analysen zugreifen und die Wiedergabe verwalten. Wir werden es jedoch verwenden, um Videos aus einer Wiedergabeliste abzurufen, damit wir sie einer Seite hinzufügen können.

Was werden wir bauen?

Wir werden eine Next.js-App zusammenstellen, die die YouTube-API verwendet, um Videos von einer Wiedergabeliste abzurufen.

Wir nehmen diese Videos auf und zeigen ihre Miniaturansichten auf einer Seite an, die auf das Video verweist.

Schritt 0: Erste Schritte mit Next.js

Um eine App zu starten, verwenden wir Next.js. Mit Garn oder npm können wir ganz einfach eine neue App erstellen, mit der wir direkt in den Code eintauchen können.

Navigieren Sie zunächst zu dem Ort, an dem Sie Ihr Projekt erstellen und ausführen möchten:

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

Dieses Skript fordert Sie zur Eingabe eines Projektnamens auf. Ich werde "my-youtube-playlist" verwenden und alle Abhängigkeiten installieren, die für den Start erforderlich sind.

Navigieren Sie dann zu diesem Verzeichnis und yarn devstarten Sie, um Ihren Entwicklungsserver zu starten, und wir können loslegen.

Folgen Sie dem Commit!

Schritt 1: Erstellen eines Google Developer-Projekts

Um die API verwenden zu können, benötigen wir ein neues Projekt in der Google Developer-Konsole, mit dem wir einen API-Schlüssel für die Verwendung des Dienstes generieren können.

Gehen Sie zunächst zu: //console.developers.google.com/.

Dort angekommen und mit Ihrem Google-Konto angemeldet, möchten wir ein neues Projekt erstellen.

An dieser Stelle können Sie Ihr Projekt beliebig benennen. Ich gehe mit "Meine YouTube-Wiedergabeliste". Klicken Sie dann auf Erstellen.

Standardmäßig werden Sie von Google nicht in das neue Projekt aufgenommen. Es startet einen Job zum Erstellen dieses Projekts, aber wenn es abgeschlossen ist, können Sie die Projektauswahl wieder öffnen und Ihr neues Projekt auswählen.

Als Nächstes möchten wir einen API-Schlüssel erstellen. Navigieren Sie zu Anmeldeinformationen, klicken Sie auf Anmeldeinformationen erstellen und wählen Sie dann API-Schlüssel aus.

Dadurch wird ein neuer API-Schlüssel erstellt, den Sie kopieren und für später speichern möchten.

Hinweis: Dieser API-Schlüssel sollte geheim gehalten werden. Wenn Sie dies offenlegen oder an einem öffentlich zugänglichen Ort wie GitHub hinzufügen, können andere es missbrauchen und Ihnen eine Rechnung zur Zahlung überlassen.

Schließlich müssen wir die YouTube-API als Dienst hinzufügen. Navigiere in der Seitenleiste zur Bibliothek , suche nach "YouTube" und wähle dann YouTube Data API v3 aus .

Klicken Sie nach dem Laden dieser Seite auf Aktivieren, um zu einer neuen Dashboard-Seite zu gelangen, und Sie können loslegen.

Schritt 2: Anfordern von Wiedergabelistenelementen über die YouTube-API

Um unsere Daten anzufordern, verwenden wir die Funktion getServerSideProps.

Öffnen Sie zunächst die pages/index.jsDatei und fügen Sie über der HomeKomponente Folgendes hinzu .

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

Folgendes machen wir:

  • Wir erstellen eine neue Konstante, in der unser API-Endpunkt gespeichert ist
  • Wir erstellen und exportieren eine neue getServerSideProps  Funktion
  • Innerhalb dieser Funktion holen wir unseren Endpunkt
  • Wir wandeln das dann in JSON um
  • Schließlich geben wir die Daten als Requisiten in unserem Objekt zurück

Wenn wir nun die dataRequisite von zerstören Homeund die Konsole abmelden, melden Sie diese Daten wie folgt ab:

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

Wir können jetzt sehen, dass wir einen Fehler bekommen:

Wir verwenden unseren API-Schlüssel nicht, also verwenden wir ihn.

Erstellen Sie eine neue Datei im Stammverzeichnis des aufgerufenen Projekts .env.localund fügen Sie den folgenden Inhalt hinzu:

YOUTUBE_API_KEY="[API Key]" 

Stellen Sie sicher, dass [API Key]Sie ab Schritt 1 Ihren API-Schlüssel ersetzen .

Zu diesem Zeitpunkt möchten Sie Ihren Server neu starten, damit Next.js die neue Variable sehen kann.

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