In this video I'm joined by Ebonie (metalandcoffee_) — web developer, Metal DJ and Twitch streamer — where we set up a new project in Next.js to curate music recommendations using the Spotify API.
In this video I'm joined by Ebonie, otherwise known as MetalAndCoffee_ — web developer, Metal DJ and Twitch streamer — to set up a new project in Next.js to curate music recommendations using the Spotify API.
Click the video below to play
This video tutorial takes an in-depth look at the structure of a Next.js application for complete beginners. I also include a demonstration of some tips and tricks on how to make your project more accessible and how to improve the developer experience, including How I set up my new Next.js projects with a handy bash script and How to avoid using relative path imports in Next.js.
View the code for this project on GitHub.
Click on the links below to jump to the relevant sections of the video.
Adding a custom _document.js file to add a lang attribute on the HTML tag
Setting up getStaticProps() and passing data to a page component
Working with environment variables and .env files in Next.js
Setting up getStaticPaths() to generate dynamic routes with data from Spotify
Using dynamic route params to fetch track recommendations from Spotify in getStaticProps()
Using Next.js Link to enable client-side transitions between page routes
Creating a React component to render Spotify track information
Using Next Image to optimize images with lazy loading, source set and preventing cumulative layout shift
CSS Module file naming conventions and structuring your projects for scale
Rebuilding your site on the server when data changes using Incremental Static Regeneration (ISR)
This video was recorded live on Twitch on Friday 30th July 2021.
I'm a live streamer, software engineer, and developer educator. I help developers build cool stuff with blog posts, tutorial videos, live coding and open source projects.