DEV Community

Cover image for A Next.js complete beginner tutorial using the Spotify API
Salma Alam-Naylor
Salma Alam-Naylor

Posted on • Originally published at whitep4nth3r.com

31 8

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.

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.

Heroku

Built for developers, by developers.

Whether you're building a simple prototype or a business-critical product, Heroku's fully-managed platform gives you the simplest path to delivering apps quickly — using the tools and languages you already love!

Learn More

Top comments (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!

Tiugo image

Fast, Lean, and Fully Extensible

CKEditor 5 is built for developers who value flexibility and speed. Pick the features that matter, drop the ones that don’t and enjoy a high-performance WYSIWYG that fits into your workflow

Start now

👋 Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay