GitHub
Open Github

Spotify Card

Display Spotify tracks with album art and blurred background.

Installation

pnpm dlx shadcn@latest add @spell/spotify-card

API Route

This component requires an API route to fetch Spotify metadata. Create the following file:

app/api/spotify/route.ts
import { NextRequest, NextResponse } from "next/server";
// @ts-expect-error no types available
import spotifyUrlInfo from "spotify-url-info";

const { getPreview } = spotifyUrlInfo(fetch) as {
  getPreview: (url: string) => Promise<{
    title: string;
    artist: string;
    image: string;
    link: string;
    audio: string;
  }>;
};

function normalizeSpotifyUrl(url: string): string {
  return url.replace(/\/intl-[a-z]{2}\//, "/");
}

export async function GET(request: NextRequest) {
  const url = request.nextUrl.searchParams.get("url");

  if (!url) {
    return NextResponse.json({ error: "URL is required" }, { status: 400 });
  }

  try {
    const normalizedUrl = normalizeSpotifyUrl(url);
    const data = await getPreview(normalizedUrl);

    return NextResponse.json({
      title: data.title,
      artist: data.artist,
      image: data.image,
      link: data.link,
      audio: data.audio,
    });
  } catch {
    return NextResponse.json(
      { error: "Failed to fetch Spotify data" },
      { status: 500 }
    );
  }
}

Examples

Usage

import { SpotifyCard } from "@/components/spotify-card";
<SpotifyCard url="https://open.spotify.com/track/4cOdK2wGLETKBW3PvgPWqT" />

Props

PropTypeDefault
url
string
-
className
string
-