How to Add a YouTube API statistics to a Next.js

To add a YouTube playlist to a Next.js application using the YouTube API, you'll need to follow these steps:

1. Set up a project in the Google Cloud Console:

• Go to the Google Cloud Console (https://console.cloud.google.com/).
• Create a new project or select an existing project.
• Enable the YouTube Data API for your project.
• Generate an API key for your project. **

1. Install the necessary packages: **

• In your Next.js project folder, open a terminal or command prompt.
• Run the following command to install the googleapispackage:

npm install googleapis

3. Create a YouTube service file:

• In your Next.js project, create a new file called youtube.js (or any other name you prefer) inside a services folder.
• Import the necessary packages and set up the YouTube API client:

import { google } from 'googleapis';

const youtube = google.youtube('v3');

const youtubeService = google.youtube({
  version: 'v3',
  auth: 'YOUR_API_KEY', // Replace with your actual API key
});

export default youtubeService;

4. Create a Next.js page:

• In your Next.js project, create a new page to display the YouTube playlist.
• Import the youtubeServicefrom the youtube.js file:

import youtubeService from '../services/youtube';

• Use the youtubeServiceto fetch the playlist data:

export async function getServerSideProps() {
  const playlistId = 'YOUR_PLAYLIST_ID'; // Replace with your actual YouTube playlist ID
  const response = await youtubeService.playlistItems.list({
    part: 'snippet',
    maxResults: 50, // Set the number of videos you want to retrieve
    playlistId,
  });

  const playlistItems = response.data.items;

  return {
    props: { playlistItems },
  };
}

• Render the playlist data on the page:

function PlaylistPage({ playlistItems }) {
  return (
    <div>
      <h1>YouTube Playlist</h1>
      <ul>
        {playlistItems.map((item) => (
          <li key={item.id}>
            <a
              href={`https://www.youtube.com/watch?v=${item.snippet.resourceId.videoId}`}
              target="_blank"
              rel="noopener noreferrer"
            >
              {item.snippet.title}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default PlaylistPage;

5. Replace the placeholders:

• Replace 'YOUR_API_KEY' in the youtube.js file with your actual API key obtained from the Google Cloud Console.
• Replace 'YOUR_PLAYLIST_ID' in the getServerSidePropsfunction with the ID of the YouTube playlist you want to display.

6. Run your Next.js application:

Start your Next.js development server by running the following command in your project's terminal:

npm run dev

• Open your browser and navigate to the URL provided by Next.js.
• You should see the YouTube playlist displayed on the page, with each video linked to its YouTube URL.

That's it! You've successfully added a YouTube playlist to your Next.js application using the YouTube API. Remember to replace the placeholders with your actual API key and playlist ID to make it work with your specific playlist.