Next.js 12 + Spotify API beginner tutorial

In this video I'm joined by Ebonie (https://twitter.com/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.

This video goes in-depth on the structure of a Next.js application for beginners, with some tips and tricks on how to make your project more accessible and how to improve the developer experience.

As we set up the project, we use getStaticProps() to fetch data from Spotify at build-time to generate static pages that work without JavaScript on the client, and we also use getStaticPaths() to generate over 100 dynamic routes at build time using data from the Spotify API.

The code for this project is available to view on GitHub: https://github.com/metalandcoffee/metal-music-curations

This video was recorded live on Twitch on Friday 30th July 2021 on https://twitch.tv/whitep4nth3r

0:00 Intro
0:31 Project description
01:02 Why use Next.js?
01:05 Structuring a Next.js application with dynamic routes (womenwhostream.tech)
03:00 Exploring the Next.js app folder structure
03:16 The pages directory
04:06 The API directory and serverless functions
06:08 The public directory
06:36 The styles directory
06:50 Adding a custom _document.js file to add a lang attribute on the HTML tag
08:13 Adding a jsconfig.json to avoid relative path imports
08:52 Get started by editing pages/index.js
09:11 The Next.js Head component
09:37 What you get with CSS Modules
11:30 The structure of a Next.js page file
11:58 Data fetching with Next.js
12:22 Setting up getStaticProps() and passing data to a page component
14:35 Working with environment variables and .env files
15:35 Using JavaScript fetch to get a list of genres from Spotify in getStaticProps()
18:11 Setting up getStaticPaths() to generate dynamic routes with data from Spotify
23:32 Using dynamic route params to fetch track recommendations from Spotify in getStaticProps()
25:06 Using Next.js Link to enable client-side transitions between page routes
27:57 Creating a React component to render Spotify track information
29:25 Using Next Image to optimize images with lazy loading, source set and preventing cumulative layout shift
33:09 A recap on what we've covered
33:40 CSS Module file naming conventions and structuring your projects for scale
35:18 How the project might evolve in Next.js
35:47 Rebuilding your site on the server when data changes using Incremental Static Regeneration (ISR)
38:44 What's the most exciting thing about Next.js?
39:43 Outro

#twitch #webdev #javascript