Using vercel to display most liked songs, used for my musichum final project and my README. My previous version was broken therefore I migrated to using NextJS, something vercel will always support because they recently acquired the framework. I've updated to NextJS 13 using the app router and API routes to return an svg. This is fully deployable, granted you follow the setup guide.
Guide by JoshLmao
Setup with a click of a button 😉
-
Sign up or Sign in to use Vercel for hosting the repo.
-
Leave the remaining settings for now and click 'Deploy'
-
Navigate to Spotify Dashboard and create a new app.
-
Click, edit settings and add "http://localhost:3000/callback" to the "Redirect URIs" section then save
-
Click 'SHOW CLIENT SECRET' under Client ID. Copy both Client ID and Client Secret and paste them into
.envfile in the root directory of this repository (create the file if it does not exist) like so:
SPOTIFY_CLIENT_ID=1234567890
SPOTIFY_CLIENT_SECRET=1234567890- Next, we need to retrieve a Refresh Token through Authoration Code flow.
There is a node script, generate-refresh-token.js to get this for you. Run the following commands:
npm install
node ./generate-refresh-token.js # You will be asked to login to your spotify account-
Navigate to your deployment on Vercel and click on Settings, then click on "Environment Variables"
-
Insert the following Variable names and insert your values from the previous steps
Name: SPOTIFY_CLIENT_ID
Value: MY_CLIENT_ID
Name: SPOTIFY_CLIENT_SECRET
Value: MY_SECRET_ID
Name: SPOTIFY_REFRESH_TOKEN
Value: MY_REFRESH_TOKEN
-
Once done, navigate to one of your deployment url's and place "/now-playing" at the end. For example, "https://now-playing-joshlmao.vercel.app/now-playing"
-
Replace "MY_VERCEL_DEPLOYMENT_URL" in the following code with one of your deployment url's and insert it into any ReadMe.md
<a href="https://MY_VERCEL_DEPLOYMENT_URL/now-playing?open">
<img src="https://MY_VERCEL_DEPLOYMENT_URL/now-playing" width="256" height="64" alt="Now Playing">`
</a>
That's it! Below is an example of what it should look like. If you have any problems, make sure to re-read the instructions and follow them precisely!
Based off the spotify readme by https://github.com/natemoo-re/natemoo-re.
I'm not a javascript/typescript developer. Please feel free to open issues and suggest best practices!