Πώς να προσθέσετε μια λίστα αναπαραγωγής YouTube σε μια εφαρμογή Next.js React με το YouTube API

Το YouTube δίνει στους δημιουργούς περιεχομένου έναν τόνο εργαλείων για να προσθέσουν τη δουλειά τους για να το δουν όλοι. Ωστόσο, αυτά τα εργαλεία σας βοηθούν μόνο να διαχειριστείτε την εμπειρία στο YouTube.

Πώς μπορούμε να χρησιμοποιήσουμε το YouTube API για να φέρουμε το περιεχόμενο βίντεο στον δικό μας ιστότοπο;

  • Το YouTube διαθέτει API;
  • Τι πρόκειται να οικοδομήσουμε;
  • Βήμα 0: Ξεκινώντας με το Next.js
  • Βήμα 1: Δημιουργία έργου προγραμματιστή Google
  • Βήμα 2: Αίτημα στοιχείων λίστας αναπαραγωγής από το YouTube API
  • Βήμα 3: Εμφάνιση βίντεο λίστας αναπαραγωγής YouTube στη σελίδα

Το YouTube διαθέτει API;

Ναι! Το YouTube, μαζί με πολλές άλλες υπηρεσίες Google, διαθέτει ένα API που μπορούμε να χρησιμοποιήσουμε για να εκμεταλλευτούμε το περιεχόμενό μας με τρόπους εκτός του YouTube. Και το API είναι αρκετά εκτεταμένο.

Με το API του YouTube, μπορείτε να κάνετε ενέργειες όπως η διαχείριση των βίντεό σας, η πρόσβαση σε αναλυτικά στοιχεία και η διαχείριση της αναπαραγωγής. Αλλά θα το χρησιμοποιήσουμε για να τραβήξουμε βίντεο από μια λίστα αναπαραγωγής, ώστε να τα προσθέσουμε σε μια σελίδα.

Τι πρόκειται να οικοδομήσουμε;

Πρόκειται να δημιουργήσουμε μια εφαρμογή Next.js που χρησιμοποιεί το YouTube API για λήψη βίντεο από μια λίστα αναπαραγωγής.

Θα τραβήξουμε αυτά τα βίντεο και θα εμφανίσουμε τις μικρογραφίες τους σε μια σελίδα που συνδέεται με το βίντεο.

Βήμα 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: Αίτημα στοιχείων λίστας αναπαραγωγής από το YouTube API

Για να ζητήσουμε τα δεδομένα μας, θα χρησιμοποιήσουμε τη συνάρτηση 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
  • Τέλος, επιστρέφουμε τα δεδομένα ως στηρίγματα στο αντικείμενο μας

Τώρα, εάν καταστρέψουμε το dataστήριγμα από 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:

  • 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