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!

Jan 13, 2022ยท

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!