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
Watch video Spotify API Authentication in Next.js with Netlify API Auth online without registration, duration hours minute second in high quality. This video was added by user Colby Fayock 13 January 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 3,826 once and liked it 94 people.