DEV Community

loading...
Cover image for A Next.js complete beginner tutorial using the Spotify API

A Next.js complete beginner tutorial using the Spotify API

Salma Alam-Naylor
✨⚡️ I help developers build stuff, learn things, and love what they do • DevRel @contentful • @Twitch partner • @Microsoft MVP • unbreak.tech founder • she/her ⚡️✨
Originally published at whitep4nth3r.com ・3 min read

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.

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.

Discussion (1)

Collapse
mdeloughry profile image
Matthew Peck-Deloughry

Awesome post as always!! and Thank you for segmenting your video up! It's not often seen outside of YouTube and is very much appreciated!