DEV Community

Cover image for How to Add a YouTube API statistics to a Next.js
MedCode
MedCode

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode
  • 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 },
  };
}

Enter fullscreen mode Exit fullscreen mode
  • 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;

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • 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.

Top comments (1)

Collapse
 
richleach profile image
Rich Leach

Any code updates now that Next.js 14 has come out and they've gotten away from getServerSideProps? Thanks for the article!