Spotify Now Playing — Adding Live Music to a Portfolio

Adding a "Now Playing" widget to a portfolio is one of those features that takes an afternoon to build but sparks more conversation than anything else on the page.

OAuth 2.0 Setup

Spotify uses the Authorization Code Flow. You need three things: a client ID, a client secret, and a refresh token. The refresh token is the important one — it lets you get new access tokens without requiring the user to log in again.

The API Route

A single Next.js API route handles everything: exchange the refresh token for an access token, call the /me/player/currently-playing endpoint, and return a sanitised response.

const response = await fetch(
  'https://api.spotify.com/v1/me/player/currently-playing',
  { headers: { Authorization: `Bearer ${accessToken}` } }
);

Edge Polling

Rather than WebSockets, a simple 30-second client poll is plenty. Spotify's API has generous rate limits and music doesn't change that often.

Handling "Not Playing"

The endpoint returns 204 when nothing is playing. The widget gracefully falls back to showing the last track played — a nicer experience than showing nothing at all.