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. **
- Install the necessary packages: **
- In your Next.js project folder, open a terminal or command prompt.
- Run the following command to install the
googleapis
package:
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
youtubeService
from the youtube.js file:
import youtubeService from '../services/youtube';
- Use the
youtubeService
to 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 theyoutube.js
file with your actual API key obtained from the Google Cloud Console. - Replace '
YOUR_PLAYLIST_ID'
in thegetServerSideProps
function 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.
Top comments (1)
Any code updates now that Next.js 14 has come out and they've gotten away from getServerSideProps? Thanks for the article!