export const metadata = { title: "Creating a Spotify Music Player with Next.js", description: "Learn how to create a Spotify music player in Next.js, including authentication, API integration, and a custom React component for playback control.", alternates: { canonical: "/p/create-spotify-music-player", }, }; import { P, H2, H3 } from "@/components/ui/typography"; import { PostLayout } from "@/app/components/Posts/PostLayout"; import { DemoMusicPlayer } from "@/components/Music/DemoMusicPlayer"; import { InterpolatedText } from "@/app/components/Posts/CustomComponents/InterpolatedText"; import Link from "next/link";

Spotify is a leading platform for streaming music, and it offers a robust API for developers to integrate its features into their apps. In this tutorial, you'll learn how to build a Spotify music player using Next.js, including authentication with OAuth 2.0, fetching playlists, and implementing playback controls.

Step 1: Setting Up Your Spotify App

Spotify Developer Dashboard ), }} className="text-muted-foreground" />

Step 2: Setting Up Authentication

Spotify uses OAuth 2.0 for user authentication. Add an API route for handling the authentication flow.

```typescript // app/api/auth/route.ts import { NextResponse } from "next/server"; const CLIENT_ID = process.env.SPOTIFY_CLIENT_ID!; const CLIENT_SECRET = process.env.SPOTIFY_CLIENT_SECRET!; const REDIRECT_URI = process.env.SPOTIFY_REDIRECT_URI!; const SPOTIFY_TOKEN_ENDPOINT = "https://accounts.spotify.com/api/token"; export async function GET(request: Request) { const url = new URL(request.url); const code = url.searchParams.get("code"); if (!code) { return NextResponse.json( { error: "Authorization code is required" }, { status: 400 } ); } const body = new URLSearchParams({ grant_type: "authorization_code", code, redirect_uri: REDIRECT_URI, client_id: CLIENT_ID, client_secret: CLIENT_SECRET, }); const response = await fetch(SPOTIFY_TOKEN_ENDPOINT, { method: "POST", body, headers: { "Content-Type": "application/x-www-form-urlencoded" }, }); if (!response.ok) { const errorText = await response.text(); console.error("Spotify Token Error:", errorText); return NextResponse.json( { error: "Failed to fetch Spotify token" }, { status: 500 } ); } const data = await response.json(); return NextResponse.json(data); } ```

Step 3: Fetching Playlists and Tracks

Next, add an API route to fetch a user's playlists and tracks. Spotify’s Web API allows you to retrieve this data easily once you have an access token.

```typescript // app/api/spotify/route.ts import { NextResponse } from "next/server"; const SPOTIFY_API = "https://api.spotify.com/v1"; export async function GET(request: Request) { const url = new URL(request.url); const accessToken = url.searchParams.get("access_token"); if (!accessToken) { return NextResponse.json( { error: "Access token is required" }, { status: 401 } ); } const response = await fetch(`${SPOTIFY_API}/me/playlists`, { headers: { Authorization: `Bearer ${accessToken}`, }, }); if (!response.ok) { const errorText = await response.text(); console.error("Spotify API Error:", errorText); return NextResponse.json( { error: "Failed to fetch playlists" }, { status: response.status } ); } const data = await response.json(); return NextResponse.json(data); } ```

Step 4: Creating the Spotify Player Component

Create a `SpotifyPlayer` component to display playlists and tracks. This component will handle playback and interact with the API.

```typescript "use client"; import { useState } from "react"; import { Play, Pause } from "lucide-react"; import { Button } from "@/components/ui/button"; export function SpotifyPlayer({ accessToken }: { accessToken: string }) { const [playlists, setPlaylists] = useState([]); const [currentTrack, setCurrentTrack] = useState(null); const [isPlaying, setIsPlaying] = useState(false); const fetchPlaylists = async () => { const response = await fetch(`/api/spotify?access_token=${accessToken}`); const data = await response.json(); setPlaylists(data.items); }; const handlePlay = (track: any) => { setCurrentTrack(track); setIsPlaying(true); }; const handlePause = () => { setIsPlaying(false); }; return (

{playlists.map((playlist: any) => (

{playlist.name}

{playlist.tracks.items.map((track: any) => (

{track.name}

))}

); } ```

Step 5: Integrating Everything

Finally, bring everything together in a single page. Include the Spotify authentication link and display the `SpotifyPlayer` component after successful login.

```typescript import { SpotifyPlayer } from "@/components/Spotify/SpotifyPlayer"; export default function SpotifyPage() { const [accessToken, setAccessToken] = useState(null); const handleLogin = () => { const params = new URLSearchParams({ client_id: process.env.NEXT_PUBLIC_SPOTIFY_CLIENT_ID!, response_type: "code", redirect_uri: process.env.NEXT_PUBLIC_SPOTIFY_REDIRECT_URI!, scope: "user-read-private user-read-email playlist-read-private", }); window.location.href = `https://accounts.spotify.com/authorize?${params.toString()}`; }; return (

{!accessToken ? ( ) : ( )}

); } ```

Time to Share Your Music!

With the Spotify Web API and Next.js, you've built a functional music player. This app can fetch playlists, show tracks, and handle playback. Extend this project further by adding search, recommendations, or track analysis!