A Next.js complete beginner tutorial using the Spotify API
Tags: webdev, javascript, nextjs
Published: 2021-08-05 08:43:14

In this video I'm joined by Ebonie, otherwise known as [MetalAndCoffee_](https://twitter.com/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.

{% youtube XPnBp0LwCFY %}

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](https://whitep4nth3r.com/blog/how-to-set-up-new-next-js-projects-with-bash-script) and [How to avoid using relative path imports in Next.js](https://whitep4nth3r.com/blog/how-to-avoid-using-relative-path-imports-next-js).

In the project we use [getStaticProps()](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation) to fetch data from Spotify at build-time to generate static pages that work without JavaScript on the client. We also use [getStaticPaths()](https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation) 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.](https://github.com/metalandcoffee/metal-music-curations)

## Video outline

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

- [Project description](https://www.youtube.com/watch?v=XPnBp0LwCFY&t=31s)
- [Why use Next.js?](https://www.youtube.com/watch?v=XPnBp0LwCFY&t=62s)
- [Structuring a Next.js application with dynamic routes](https://www.youtube.com/watch?v=XPnBp0LwCFY&t=65s)
- [Exploring the Next.js app folder structure](https://www.youtube.com/watch?v=XPnBp0LwCFY&t=180s)
- [The Next.js pages directory](https://www.youtube.com/watch?v=XPnBp0LwCFY&t=196s)
- [The Next.js API directory and serverless functions](https://www.youtube.com/watch?v=XPnBp0LwCFY&t=246s)
- [The Next.js public directory](https://www.youtube.com/watch?v=XPnBp0LwCFY&t=368s)
- [The Next.js styles directory](https://www.youtube.com/watch?v=XPnBp0LwCFY&t=396s)
- [Adding a custom _document.js file to add a lang attribute on the HTML tag](https://www.youtube.com/watch?v=XPnBp0LwCFY&t=410s)
- [Adding a jsconfig.json to avoid relative path imports](https://www.youtube.com/watch?v=XPnBp0LwCFY&t=493s)
- [Getting started by editing pages/index.js](https://www.youtube.com/watch?v=XPnBp0LwCFY&t=532s)
- [The Next.js Head component](https://www.youtube.com/watch?v=XPnBp0LwCFY&t=551s)
- [What you get with CSS Modules](https://www.youtube.com/watch?v=XPnBp0LwCFY&t=577s)
- [The structure of a Next.js page file](https://www.youtube.com/watch?v=XPnBp0LwCFY&t=690s)
- [Data fetching with Next.js](https://www.youtube.com/watch?v=XPnBp0LwCFY&t=718s)
- [Setting up getStaticProps() and passing data to a page component](https://www.youtube.com/watch?v=XPnBp0LwCFY&t=742s)
- [Working with environment variables and .env files in Next.js](https://www.youtube.com/watch?v=XPnBp0LwCFY&t=875s)
- [Using JavaScript fetch to get a list of genres from Spotify in getStaticProps()](https://www.youtube.com/watch?v=XPnBp0LwCFY&t=935s)
- [Setting up getStaticPaths() to generate dynamic routes with data from Spotify](https://www.youtube.com/watch?v=XPnBp0LwCFY&t=1091s)
- [Using dynamic route params to fetch track recommendations from Spotify in getStaticProps()](https://www.youtube.com/watch?v=XPnBp0LwCFY&t=1412s)
- [Using Next.js Link to enable client-side transitions between page routes](https://www.youtube.com/watch?v=XPnBp0LwCFY&t=1506s)
- [Creating a React component to render Spotify track information](https://www.youtube.com/watch?v=XPnBp0LwCFY&t=1677s)
- [Using Next Image to optimize images with lazy loading, source set and preventing cumulative layout shift](https://www.youtube.com/watch?v=XPnBp0LwCFY&t=1765s)
- [CSS Module file naming conventions and structuring your projects for scale](https://www.youtube.com/watch?v=XPnBp0LwCFY&t=2020s)
- [Rebuilding your site on the server when data changes using Incremental Static Regeneration (ISR)](https://www.youtube.com/watch?v=XPnBp0LwCFY&t=2147s)

This video was recorded [live on Twitch](https://twitch.tv/whitep4nth3r) on Friday 30th July 2021.