Skip to main content

A Next.js complete beginner tutorial 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 below to play Next.js beginner tutorial using the Spotify API with @metalandcoffee_

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.

This video was recorded live on Twitch on Friday 30th July 2021.

Read next 👇

  • The pink Jamstack logo that features a blocked white J shape on a pink background.
  • A white triangle representing the Vercel logo.
  • An icon of a laptop with angled brackets on the screen.
A Youtube thumbnail featuring my headshot against a red background on the left, Colby on the right pulling a silly face, and the title in the middle which reads Ecomm & Next.js. Ecommerce on the Jamstack.

Ecommerce and Next.js on the Jamstack — with Colby Fayock

16 Sep 2021 48 min read

  • The pink Jamstack logo that features a blocked white J shape on a pink background.
  • A yellow square with the black letters JS at the bottom right.
  • A white triangle representing the Vercel logo.
  • The Netlify logo in the green gradient.
A screenshot from the Building with Next.js Cassidy Williams and Salma Alam-Naylor Architecting with Next.js 2021 video showing Cassidy on the left and Salma on the right against a Netlify branded background.

Why I love building with Next.js — a fireside chat with Cassidy Williams of Netlify

1 Sep 2021 1 min read

See all blog posts