Spotify Web Playback SDK Example by Next.js and TypeScript

This is an example app that is rewritten from the official Spotify Web Playback SDK Javascript Tutorial with Next.js and Typescript.

Using your own credentials

You will need to register your app and get your own credentials from the Spotify for Developers Dashboard

To do so, go to your Spotify for Developers Dashboard, create your application and register the following callback URI:

http://localhost:3000/api/auth/callback

Once you have created your app, create a file called .env in the root folder of the repository with your Spotify credentials:

SPOTIFY_CLIENT_ID='my_client_id'
SPOTIFY_CLIENT_SECRET='my_client_secret'

Installation

These examples run on Node.js. On its website you can find instructions on how to install it.

Once installed, clone the repository and install its dependencies running:

npm install

Running the example

Start both client and server with the following command:

npm run dev

The React application will start on http://localhost:3000

Related articles

• "Next.js + TypeScript で Spotify Web Playback SDK の公式サンプルを書き直してみた"(zenn.dev)