YouTube provides creators with numerous tools for managing their content on the platform. However, these tools are limited to enhancing the YouTube experience itself.
To get the YouTube API for displaying video content on our own website, we can tap into a variety of functionalities. This includes fetching playlists, accessing channel analytics, tracking audience demographics, and much more. With the YouTube API, we gain the flexibility to integrate our video content into our website, allowing us to customize the viewing experience to our specific needs and preferences. In this blog, I have explained easily how to add Youtube API with the NextJs React app and how to fetch YouTube playlists to your project.
What is YouTube API?
You can incorporate features that are often used on the YouTube website into your own application or website by using the YouTube Data API.
The API allows you to adjust channel settings, manage playlists and subscriptions, and publish videos, among other things. Additionally, you can employ the YouTube API to look for videos that match particular keywords, subjects, regions, release dates, etc.
Adding YouTube Playlist with React NextJs using Google Youtube Data API
Step 1- Create a Project on Google Developer Console
To use the Youtube Playlist API, we must first open the Google Developer Console dashboard, create a new project, and get an API key to access the service.
Go to https://console.developers.google.com/ to get started.
Create a new project when you've arrived and logged in using your Google account.
You're free to choose any name for your project at this stage. For example, I'm selecting "My YouTube Playlist". After naming it, click on Create.
Initially, Google won't immediately take you to the newly created project. Instead, it initiates the process of creating the project. Once it's done, you can reopen the project selector and pick your newly created project.
The next step is to generate an API key. Go to Credentials, choose API key, and then click Create Credentials.
You should copy and save the new API key that is generated as a result for subsequent use.
Simply head to the Library section on the sidebar, look up 'YouTube', and opt for the YouTube Data API v3.
After the page finishes loading, simply click on 'Enable.' This action will direct you to a new dashboard page, and you'll be all set to proceed.Step 2- Create NextJs Project
yarn create next-app
# or
npx create-next-app
Step 3- Fetch YouTube playlist Videos from the YouTube API
I used getServerSideProps here to fetch data from the YouTube API on the server side. This approach can be beneficial for scenarios where you need to fetch data dynamically for each request or when the data is sensitive and should not be exposed to the client.
import axios from 'axios';
const Playlist = ({ playlistItems }) => (
<div>
<h1>Playlist Items</h1>
<ul>
{playlistItems.map((item) => (
<li key={item.id}>
<img src={item.snippet.thumbnails.default.url} alt={item.snippet.title} />
<p>{item.snippet.title}</p>
</li>
))}
</ul>
</div>
);
export async function getServerSideProps() {
try {
const playlistId = 'YOUR_PLAYLIST_ID';
const apiKey = 'YOUR_API_KEY';
const apiUrl = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=${playlistId}&key=${apiKey}`;
const response = await axios.get(apiUrl);
const playlistItems = response.data.items;
return {
props: {
playlistItems,
},
};
} catch (error) {
console.error('Error fetching playlist items:', error);
return {
props: {
playlistItems: [],
},
};
}
}
export default Playlist;
The getServerSideProps function is responsible for fetching the playlist items from the YouTube API and passing them as props to the Playlist component.
That's it! We are done😀
Happy coding❤
