How to Show Now Playing in Spotify with Next.js

Photo by C D-X on Unsplash

How to Show Now Playing in Spotify with Next.js

Spotify API grants us access to know what music is currently playing. Awesome addition to your dev portfolio!


5 min read

On this website, I use Spotify API to show what song is currently playing. Now, I will try to explain on how do I do that.

Next.js has a built-in API in a single application, so choosing Next.js is a perfect choice so we don't expose our API keys.


Website Demo

1. Create an Application on Spotify Developer

  • Go to Spotify Developer Website.
  • Click Create An App
  • Fill in App Name, App description, then Create


  • Next, you will be provided with Client ID and Client Secret (Don't give this secret to anyone)

Client Info

  • Open edit settings, then fill out http://localhost:3000 on RedirectURIs

Edit Settings

The first step is done! Now, you need to do authentication to get access & refresh token

2. Authenticate Your Account

To do authentication, we need to prepare CLIENT_ID and put it into this link below:


Open that link in a browser, then you will get redirected into a uri, copy the website link

Redirect URI

Example of the redirect link:


code that you have is the one after (=). Don't forget to write it down.

Next we need to get authorization client that is already encrypted with base64, use this website to encrypt with the format of client_id:client_secret

For example:

Base64 Encode

Next, write down the encrypted base64

After that, open up terminal/cmd, and run this command, don't forget to change the base64 and the code to yours.

curl -H "Authorization: Basic CHANGE_BASE64_HERE"
-d grant_type=authorization_code -d code=CHANGE_CODE_HERE -d redirect_uri=http%3A

*make sure the command is in one line


curl -H "Authorization: Basic ZWFjY2I5N2Y2ZDBlNDA1ODk3YWRmMWRkODBiOTVjMDE6YTQxOTVjMmQwYTQyNDM2MDllNjk3ZTYwMmU3MGI3NjI=" -d grant_type=authorization_code -d code=AQBeA9SD7QbA9hUfv_TfmatYxT51CY87msMnOZmMbhf7ZaxfbvG7oKEsATOJBxDyFap0Aq6uftY0v4Hq1QSy3MgQBfAHhmrifty-62rfDRlFnd0AzXRBOMpoOSA6SNw_uTPp7AixAE5zosgiIIf7efhzf1QOJfLh1HUYi248z8jk1x2jjKG2YLvMyJuP0rjB5tP5UHjoFGBvKbULpchkF6yiJHnS -d redirect_uri=http%3A%2F%2Flocalhost:3000

You will get a JSON like this:

  "access_token": "BQDKxO7h1I1wA3esGK9zCFWn97XORJEPjwAHAEIxCnDXcmy9GbEuPacquwWvpiM4d33gJVHVOP9KUxY8AXkpXc-_zRFZBfneHM2vEeV1Fbfr-0Mw94oimlNf77dRiyxPpm4IUVNLloUWgYcfkAO0",
  "token_type": "Bearer",
  "expires_in": 3600,
  "refresh_token": "AQAtxXvnzRTt4c2-2_Av2WyJQKWxUW_hMVN6QNiqv2i8A2ZElVarmvdhqyc8Pf-Z5n827FTFxTpHq5E3kOsrlRWM3TuJWxjVQsW0icR0zo3BXRFLt2FB2Qfj-pFaZwY-qc8",
  "scope": "user-read-currently-playing"

Example on the terminal:


what we need to write down is the refresh_token. That token will last infinitely

Now you can do the request with Next.js or another backend application

3. Creating API routes in Next.js

If you need a reference to create the app, you can check my repository. Don't forget to star it!

You can also use my nextjs-tailwind-starter by using:

npx create-next-app -e project-name

After all app is installed, add querystring dependency

yarn add querystring


npm i querystring

Next, make an api route in /pages/api/spotify.js

If you want the TypeScript version, checkout the code on GitHub

// /pages/api/spotify.js
import querystring from 'querystring';

const {
  SPOTIFY_CLIENT_ID: client_id,
  SPOTIFY_CLIENT_SECRET: client_secret,
  SPOTIFY_REFRESH_TOKEN: refresh_token,
} = process.env;

const basic = Buffer.from(`${client_id}:${client_secret}`).toString('base64');
const TOKEN_ENDPOINT = ``;

const getAccessToken = async () => {
  const response = await fetch(TOKEN_ENDPOINT, {
    method: 'POST',
    headers: {
      Authorization: `Basic ${basic}`,
      'Content-Type': 'application/x-www-form-urlencoded',
    body: querystring.stringify({
      grant_type: 'refresh_token',

  return response.json();

export const getNowPlaying = async () => {
  const { access_token } = await getAccessToken();

  return fetch(NOW_PLAYING_ENDPOINT, {
    headers: {
      Authorization: `Bearer ${access_token}`,

export default async (_, res) => {
  const response = await getNowPlaying();

  if (
    response.status === 204 ||
    response.status > 400 || !== 'track'
  ) {
    return res.status(200).json({ isPlaying: false });

  const data = {
      .map((artist) =>
      .join(', '),


Add .env.local with authorization data that we have written (change the data below with yours)


Your API is ready with route: GET https://localhost:3000/api/spotify

4. Use API with Next.js

For data fetching, we can use SWR. SWR is a great library that can fetch the API periodically. SWR will do refetching each time we refocus a the window. Also, install react-icons to get the spotify logo.

yarn add swr react-icons


npm i swr react-icons

Add SWR in pages/index.jsx like this:

TypeScript Version

import useSWR from 'swr';

export default function Home() {
  const fetcher = (url) => fetch(url).then((r) => r.json());
  const { data } = useSWR('/api/spotify', fetcher);
  return (
      <section className='bg-gray-600'>
        <main className='flex justify-center items-center'>

There will be 2 types of JSON data that will be sent by the Spotify API:

  1. When there is no song playing

      "isPlaying": false
  2. When there is a song playing

      "album": "Menari Dengan Bayangan",
      "albumImageUrl": "",
      "artist": "Hindia",
      "isPlaying": true,
      "songUrl": "",
      "title": "Besok Mungkin Kita Sampai"

So, we can conditionally render the data like this:

  rel='noopener noreferer'
      ? data.songUrl
      : ''
  className='flex relative items-center p-5 space-x-4 w-72 rounded-md border transition-shadow hover:shadow-md'
  <div className='w-16'>
    {data?.isPlaying ? (
        className='w-16 shadow-sm'
    ) : (
      <SiSpotify size={64} color={'#1ED760'} />

  <div className='flex-1'>
    <p className='component font-bold'>
      {data?.isPlaying ? data.title : 'Not Listening'}
    <p className='font-dark text-xs'>
      {data?.isPlaying ? data.artist : 'Spotify'}
  <div className='absolute right-1.5 bottom-1.5'>
    <SiSpotify size={20} color={'#1ED760'} />

You can check out the live deployment on

Thanks and Goodluck!

Originally posted on my personal site, find more blog posts and code snippets library I put up for easy access on my site ๐Ÿš€

Like this post? Subscribe to my newsletter to get notified every time a new post is out!