THE INTERACTIVE PLAYGROUND
One API.
Infinite looks.
The data stays the same. The interface is yours to imagine. Change the scene and watch the hooks respond.
02 / CHANGE THE LOOKOne response, six ways to present it.
YOUR SOUNDTRACK / 001 PAUSED
FIG. 01 — ONE HEADLESS HOOK, SIX DIFFERENT LOOKS.BUILT WITH NEXT.JS
BEYOND WHAT’S PLAYING
There’s more to the story.
Top tracks and artists use the same simple pattern: request data, then make the presentation your own.
THE REPEAT LIST
01 / 02Top tracks
IN GOOD COMPANY
02 / 02Top artists
UNDER THE HOODStart with data.
Start with data.
End anywhere.
This preview calls the package’s real React hooks with a mock fetcher. In your app, point the hooks at your own server endpoint. Keep Spotify credentials on the server and persist rotated refresh tokens.
app/api/now-playing/route.tsTS
// app/api/now-playing/route.ts
import { createNowPlayingRoute } from 'spotify-now-playing-headless/nextjs'
export const GET = createNowPlayingRoute({
clientId: process.env.SPOTIFY_CLIENT_ID!,
clientSecret: process.env.SPOTIFY_CLIENT_SECRET!,
refreshToken: process.env.SPOTIFY_REFRESH_TOKEN!,
onRefreshToken: persistRefreshToken, // implement server-side storage
})
// Then call useNowPlaying({ endpoint: '/api/now-playing' })
// from a Client Component.TAKE IT INTO YOUR APP
A head start for you and your agent.
Give your coding agent a focused implementation prompt, then fill in your framework, UI, and secret storage. The agent guide explains the package’s entry points and secure server setup.
YOUR NEXT STEP / COPY + CUSTOMIZE
“I want to add Spotify Now Playing, Top Tracks, and Top Artists to my app using spotify-now-playing-headless...”
FRAMEWORK · UI · SECRET STORAGE · VERIFICATION