A Next.js complete beginner tutorial using the Spotify API

⚠️ This post is over two years old and may contain some outdated technical information. Please proceed with caution!

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 above 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.

In the project we use getStaticProps() to fetch data from Spotify at build-time to generate static pages that work without JavaScript on the client. We also use getStaticPaths() to generate over 100 dynamic routes at build time using data from the Spotify API. It works really well!

Source code

View the code for this project on GitHub.

Video outline

Click on the links below to jump to the relevant sections of the video.

• Project description

• Why use Next.js?

• Structuring a Next.js application with dynamic routes

• Exploring the Next.js app folder structure

• The Next.js pages directory

• The Next.js API directory and serverless functions

• The Next.js public directory

• The Next.js styles directory

• Adding a custom _document.js file to add a lang attribute on the HTML tag

• Adding a jsconfig.json to avoid relative path imports

• Getting started by editing pages/index.js

• The Next.js Head component

• What you get with CSS Modules

• The structure of a Next.js page file

• Data fetching with Next.js

• Setting up getStaticProps() and passing data to a page component

• Working with environment variables and .env files in Next.js

• Using JavaScript fetch to get a list of genres from Spotify in getStaticProps()

• 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.