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.
Click on the links below to jump to the relevant sections of the video.
- Project description
- Why use Next.js?
- Structuring a Next.js application with dynamic routes
- Exploring the Next.js app folder structure
- The Next.js pages directory
- The Next.js API directory and serverless functions
- The Next.js public directory
- The Next.js styles directory
- Adding a custom _document.js file to add a lang attribute on the HTML tag
- Adding a jsconfig.json to avoid relative path imports
- Getting started by editing pages/index.js
- The Next.js Head component
- What you get with CSS Modules
- The structure of a Next.js page file
- Data fetching with Next.js
- Setting up getStaticProps() and passing data to a page component
- Working with environment variables and .env files in Next.js
- Setting up getStaticPaths() to generate dynamic routes with data from Spotify
- Using dynamic route params to fetch track recommendations from Spotify in getStaticProps()
- Using Next.js Link to enable client-side transitions between page routes
- Creating a React component to render Spotify track information
- Using Next Image to optimize images with lazy loading, source set and preventing cumulative layout shift
- CSS Module file naming conventions and structuring your projects for scale
- Rebuilding your site on the server when data changes using Incremental Static Regeneration (ISR)
This video was recorded live on Twitch on Friday 30th July 2021.