Skip to main content
whitep4nth3r logo

4 Aug 2021

1 min read

A Next.js complete beginner tutorial using the Spotify API

I'm joined by Ebonie (metalandcoffee_) where we set up a new Next.js and Spotify API project to curate music recommendations.

⚠️ 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.

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

Like weird newsletters?

Join 209+ subscribers in the Weird Wide Web Hole to find no answers to questions you didn't know you had.

Subscribe

Salma is looking at you, with a rather large smile. She's pointing across herself up to her left, with a very tatooed arm. She's wearing a black shirt and black rimmed glasses.

Salma Alam-Naylor

I'm a live streamer, software engineer, and developer educator. I help developers build cool stuff with blog posts, videos, live coding and open source projects.

Related posts

16 Sep 2021

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

I sat down with Colby Fayock to chat about Next.js and how all of its features help enable developers to build great experiences on the web.

Web Dev 48 min read →

1 Sep 2021

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

I joined Cassidy Williams to talk about the performance benefits of Next.js, and how developers can make the most of the JavaScript framework.

JavaScript 1 min read →