It's a fun, unique way for me to showcase various metrics about my life. It's also a playground for experimenting with new technology and APIs. It currently has integrations with YouTube, Unsplash, Firebase, Revue, GitHub, Gumroad, and now Spotify!
I wanted to display what song I'm currently listening to, as well as my top tracks. To accomplish this, I'd need to integrate Spotify's API with Next.js API routes. This post will be a quick tutorial to get up and running with Spotify.
Create an Application
First, we need to create a Spotify application to give us credentials to authenticate with the API.
Go to your Spotify Developer Dashboard and log in.
Click Create an App.
Fill out the name and description and click create.
Click Show Client Secret.
Save your Client ID and Secret. You'll need these soon.
Click Edit Settings.
Add http://localhost:3000 as a redirect URI.
All done! You now have a properly configured Spotify application and the correct credentials to make requests.
Authentication
There are a variety of ways to authenticate with the Spotify API, depending on your application. Since we only need permission granted once, we'll use the Authorization Code Flow.
First, we'll have our application request authorization by logging in with whatever scopes we need. Here's an example of what the URL might look like. Swap out the client_id and scopes for your own.
After authorizing, you'll be redirected back to your redirect_uri. In the URL, there's a code query parameter. Save this value.
http://localhost:3000/callback?code=NApCCg..BkWtQ
Next, we'll need to retrieve the refresh token. You'll need to generate a Base 64 encoded string containing the client ID and secret from earlier. You can use this tool to encode it online. The format should be client_id:client_secret.
This token is valid indefinitely unless you revoke access, so we'll want to save this in an environment variable.
Read The Complete Article Here:- https://www.epicprogrammer.com/2021/12/using-spotify-api-with-nextjs.html
Top comments (0)