Spotify API Authentication in Next.js with Netlify API Auth
Learn how to easily make authenticated requests to the Spotify Web API using Netlify API Authentication. We'll walk through spinning up a new Next.js app from a demo starter, deploying a Netlify site with API Authentication enabled, connecting Spotify, and using getStaticProps to dynamically fetch the Spotify account's Top Artists and Top Tracks.
🧐 What's Inside
00:00 - Intro
00:13 - Tools we'll use including Spotify Web API, Netlify API Auth, and Next.js
02:05 - Creating a new Next.js app from a Starter Demo
03:09 - Setting up a new repository in GitHub from a local project
03:52 - Deploying a Next.js site on Netlify from a connected GitHub repository
04:54 - Enabling the API Authentication feature in Netlify Labs
05:29 - Adding API Authentication and connecting to the Spotiy API with a Netlify Site
06:59 - Installing and logging in with the Netlify CLI to locally develop with the Netlify Site environment
09:55 - Using Netlify Function helpers to get enviroment secrets and Spotify session token
11:43 - Fetching top artists and tracks from the Spotify Web API
18:49 - Outro
🗒️ Read More
https://spacejelly.dev/posts/how-to-a...
💾 Code
https://github.com/colbyfayock/my-spo...
🔔 Subscribe for more tech and developer videos
https://www.youtube.com/colbyfayock?s...
🐦 Get updates straight to your Twitter @colbyfayock
/ colbyfayock
📸 Catch the next stream live on Twitch @colbyfayock
/ colbyfayock
✉️ Or a newsletter right to your inbox!
https://www.colbyfayock.com/newsletter/
💝 Sponsor me for more free content like this!
GitHub: https://github.com/sponsors/colbyfayock
Other: [email protected]
👨🚀 Brought to by colbyfayock.com
https://www.colbyfayock.com
🎥 Want to know what A/V equipment I use?
https://www.colbyfayock.com/uses
🧰 More Resources
Demo Top Music Starter
https://github.com/colbyfayock/demo-t...
First Look: Announcing API Authentication on Netlify
https://www.netlify.com/blog/2021/11/...
Spotify Web API
https://developer.spotify.com/documen...
Netlify Function Helpers
https://www.npmjs.com/package/@netlif...
🎼 Music
Music from Uppbeat (free for Creators!):
https://uppbeat.io/t/mountaineer/autu...
License code: RU94EK8FRDQ3QCJL
#colbyfayock #spotify #nextjs #netlify #webapi #api #music #webdevelopment