Cara Menampilkan Lagu Now Playing di Spotify dengan Next.js

Introduction

Pada website theodorusclarence.com, saya menggunakan sebuah API dari Spotify untuk menunjukkan lagu apa yang sedang saya putar secara live. Sekarang, saya akan memberitahu bagaimana cara membuat persis seperti yang saya tunjukkan dengan menggunakan Next.js.

Next.js memiliki fitur khusus yaitu kita bisa membuat api route semacam express dalam 1 aplikasi itu, maka memilih Next.js menjadi pilihan yang sangat tepat.

Website Demo

1. Membuat Aplikasi di Spotify Developer

• Masuk ke website Spotify Developer
• Klik Create An App
• Masukkan App Name, App description, kemudian Create

• Selanjutnya, kamu akan mendapatkan Client ID dan Client Secret (Jangan memberikan kode ini ke siapa-siapa)

• Buka edit settings, kemudian masukkan http://localhost:3000 pada RedirectURIs

Step pertama selesai! Sekarang kamu harus melakukan authentication untuk mendapatkan access & refresh token

2. Authentication Account

Untuk melakukan authentication, kita harus menyiapkan CLIENT ID dan memasukkan ke link dibawah:

https://accounts.spotify.com/authorize?client_id=MASUKKAN_CLIENT_ID_DISINI&response_type=code&redirect_uri=http
%3A%2F%2Flocalhost:3000&scope=user-read-currently-playing
text

contoh:

https://accounts.spotify.com/authorize?client_id=eaccb97f6d0e405897adf1dd80b95c01&response_type=code&redirect_uri=http
%3A%2F%2Flocalhost:3000&scope=user-read-currently-playing
text

Buka link tersebut di browser, kemudian anda akan diarahkan ke redirect uri, copy link websitenya

Contoh link redirect sebagai berikut:

http://localhost:3000/?code=AQBeA9SD7QbA9hUfv_TfmatYxT51CY87msMnOZmMbhf7ZaxfbvG7oKEsATOJBxDyFap0Aq6uftY0v4Hq1QSy3MgQBfAHhmrifty-62rfDRlFnd0AzXRBOMpoOSA6SNw_uTPp7AixAE5zosgiIIf7efhzf1QOJfLh1HUYi248z8jk1x2jjKG2YLvMyJuP0rjB5tP5UHjoFGBvKbULpchkF6yiJHnS
text

code yang kamu miliki adalah yang setelah tanda sama dengan (=). Jangan lupa dicatat

Kemudian kita membutuhkan authorization client yang telah diencrypt dengan base64, gunakan aplikasi base64 encoding untuk mengencrypt data dengan format client_id:client_secret

Contohnya sebagai berikut:

Kemudian, catat hasil encrypt base64 tersebut.

Setelah itu buka terminal / cmd, kemudian jalankan command berikut, jangan lupa ubah base64 dan code milik kamu.

curl -H "Authorization: Basic MASUKKAN_BASE64_DISINI"
-d grant_type=authorization_code -d code=MASUKKAN_CODE_DISINI -d redirect_uri=http%3A
%2F%2Flocalhost:3000 https://accounts.spotify.com/api/token
bash

*pastikan command berada dalam 1 line

Contoh:

curl -H "Authorization: Basic ZWFjY2I5N2Y2ZDBlNDA1ODk3YWRmMWRkODBiOTVjMDE6YTQxOTVjMmQwYTQyNDM2MDllNjk3ZTYwMmU3MGI3NjI=" -d grant_type=authorization_code -d code=AQBeA9SD7QbA9hUfv_TfmatYxT51CY87msMnOZmMbhf7ZaxfbvG7oKEsATOJBxDyFap0Aq6uftY0v4Hq1QSy3MgQBfAHhmrifty-62rfDRlFnd0AzXRBOMpoOSA6SNw_uTPp7AixAE5zosgiIIf7efhzf1QOJfLh1HUYi248z8jk1x2jjKG2YLvMyJuP0rjB5tP5UHjoFGBvKbULpchkF6yiJHnS -d redirect_uri=http%3A%2F%2Flocalhost:3000 https://accounts.spotify.com/api/token
bash

Kamu akan mendapatkan return JSON yaitu:

{
  "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"
}
json

Contoh running command pada terminal:

yang perlu kita catat adalah refresh_token. Token tersebut akan berlaku untuk selamanya.

Sekarang kamu sudah bisa request dengan menggunakan Next.js atau aplikasi backend lainnya.

3. Membuat API di Next.js

Jika kamu butuh referensi untuk membuat aplikasi, kamu bisa cek repository saya. Jangan lupa di star ya!

Kamu bisa menggunakan nextjs-tailwind-starter dengan command:

npx create-next-app -e https://github.com/theodorusclarence/nextjs-tailwind-starter project-name
bash

Setelah aplikasi terinstall, tambahkan dependency querystring

yarn add querystring

atau

npm i querystring
bash

Kemudian, buat api route di /pages/api/spotify.js

Jika anda ingin code TypeScript, anda bisa mengecek codenya di 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 NOW_PLAYING_ENDPOINT = `https://api.spotify.com/v1/me/player/currently-playing`;
const TOKEN_ENDPOINT = `https://accounts.spotify.com/api/token`;

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',
      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 ||
    response.data.currently_playing_type !== 'track'
  ) {
    return res.status(200).json({ isPlaying: false });
  }

  const data = {
    isPlaying: response.data.is_playing,
    title: response.data.item.name,
    album: response.data.item.album.name,
    artist: response.data.item.album.artists
      .map((artist) => artist.name)
      .join(', '),
    albumImageUrl: response.data.item.album.images[0].url,
    songUrl: response.data.item.external_urls.spotify,
  };

  res.status(200).json(data);
};
jsx

Tambahkan .env.local dengan data authorization yang sudah kita dapatkan (ubahlah data" dibawah dengan data kamu)

SPOTIFY_CLIENT_ID=eaccb97f6d0e405897adf1dd80b95c01
SPOTIFY_CLIENT_SECRET=a4195c2d0a4243609e697e602e70b7
SPOTIFY_REFRESH_TOKEN=AQAtxXvnzRTt4c2-2_Av2WyJQKWxUW_hMVN6QNiqv2i8A2ZElVarmvdhqyc8Pf-Z5n827FTFxTpHq5E3kOsrlRWM3TuJWxjVQsW0icR0zo3BXRFLt2FB2Qfj-pFaZwY-qc8
text

API kamu sudah siap untuk digunakan dengan route: GET https://localhost:3000/api/spotify

4. Menggunakan API di aplikasi Next.js

Untuk fetching, kita bisa menggunakan library SWR. SWR adalah library yang sangat cocok untuk menembak API Spotify secara berkala. SWR akan melakukan refetching pada saat window refocus, dan perpindahan route. Install juga react-icons untuk mendapatkan logo spotify.

yarn add swr react-icons

atau

npm i swr react-icons
bash

Tambahkan SWR di pages/index.jsx seperti code dibawah:

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 items-center justify-center'>
          {console.log(data)}
        </main>
      </section>
    </>
  );
}
jsx

Akan ada 2 tipe data JSON yang akan diberikan oleh API Spotify:

1. Ketika tidak memainkan lagu apa-apa

   {
     "isPlaying": false
   }
   json
   

2. Ketika sedang memainkan lagu

   {
     "album": "Menari Dengan Bayangan",
     "albumImageUrl": "https://i.scdn.co/image/ab67616d0000b273d623688488865906052ef96b",
     "artist": "Hindia",
     "isPlaying": true,
     "songUrl": "https://open.spotify.com/track/08OPqLv99g8avzmxQepmiw",
     "title": "Besok Mungkin Kita Sampai"
   }
   json
   

Maka, kita bisa membuat component conditional untuk merender data tersebut, disini saya menggunakan icons dengan library 'react-icons'

<a
  target='_blank'
  rel='noopener noreferer'
  href={
    data?.isPlaying
      ? data.songUrl
      : 'https://open.spotify.com/user/erence21?si=yTsrZT5JSHOp7tn3ist7Ig'
  }
  className='relative flex w-72 items-center space-x-4 rounded-md border p-5 transition-shadow hover:shadow-md'
>
  <div className='w-16'>
    {data?.isPlaying ? (
      <img
        className='w-16 shadow-sm'
        src={data?.albumImageUrl}
        alt={data?.album}
      />
    ) : (
      <SiSpotify size={64} color={'#1ED760'} />
    )}
  </div>

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

Hasil bisa dilihat di spotify-playing.theodorusclarence.com

Thanks and Goodluck!