Installation
pnpm dlx shadcn@latest add @spell/spotify-cardAPI 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
Multiple Songs w/ Carousel
Usage
import { SpotifyCard } from "@/components/spotify-card";<SpotifyCard url="https://open.spotify.com/track/4cOdK2wGLETKBW3PvgPWqT" />Props
| Prop | Type | Default |
|---|---|---|
url | string | - |
className | string | - |