Learn how to use the YouTube API to request all videos from a playlist and display them on a page. We’ll walk through setting up an API key and getting the YouTube API set up in the Google Developer Console then use Next.js to spin up a new app and render the video thumbnails with links on the page.
YouTube gives content creators a ton of tools to add their work for everyone to see. But those tools only help you manage the experience on YouTube.
How can we utilize the YouTube API to bring our video content to our own website?
- YouTube has an API?
- What are we going to build?
- Step 0: Getting started with Next.js
- Step 1: Creating a Google Developer project
- Step 2: Requesting playlist items from the YouTube API
- Step 3: Showing YouTube playlist videos on the page
YouTube has an API?
Yup! YouTube, along with a lot of other Google services, has an API that we can use to take advantage of our content in ways outside of YouTube. And the API is pretty extensive.
With YouTube’s API, you can do things like manage your videos, access analytics, and manage playback. But we’re going to use it for grabbing videos from a playlist so that we can add them to a page.
What are we going to build?
We’re going to put together a Next.js app that uses the YouTube API To fetch videos from a playlist.
We’ll take those videos and we’ll display their thumbnails on a page that links to the video.
Step 0: Getting started with Next.js
To spin up an app, we’re going to use Next.js. Using yarn or npm, we can easily create a new app that will let us dive right into the code.
So to get started, navigate to where you want to create your project and run:
yarn create next-app
# or
npx create-next-app
That script will prompt you for a project name. I’m going to use “my-youtube-playlist”, and it will install all of the dependencies needed to get started.
Successfully created a new app with Next.js
Then navigate to that directory and run yarn dev to start your development server and we’re ready to go.
Next.js default page
Step 1: Creating a Google Developer project
To use the API, we’re going to need a new project in the Google Developer console that will allow us to generate an API key to use the service.
First, head over to: https://console.developers.google.com/.
Once there and logged in with your Google account, we’ll want to create a new project.
Creating a new project in Google Developer Console
At this point, you can name your project whatever you’d like. I’m going with “My YouTube Playlist”. Then click Create.
By default, Google won’t drop you into the new project. It kicks off a job to create that project, but once it finishes, you can open back up the project selector and select your new project.
Selecting your project
Next, we want to create an API key. Navigate to Credentials, click Create Credentials, and then select API key.
Creating an API Key credential
This will create a new API key that you’ll want to copy and save for later.
Copying your new API key
Note: This API key should be kept secret. If you expose this or add it somewhere available to the public like GitHub, others can abuse it and leave you with a bill to pay.
Finally, we need to add the YouTube API as a service. Navigate to Library in the sidebar, search for “YouTube”, and then select YouTube Data API v3.
Searching for YouTube API in the Google API Library
Finally after that page loads, click Enable, which will bring you to a new dashboard page and you’ll be ready to go.
Enabling YouTube Data API v3
🗒️ Original Post: https://www.freecodecamp.org/news/how-to-add-a-youtube-playlist-to-a-nextjs-react-app-with-the-youtube-api/
#react #next #api #developer
