Next

Introduction

• 📺 Next.js in 100 Seconds // Plus Full Beginner’s Tutorial • 12 minute video by Fireship
• 📺 Let’s Learn Next.js! (with Scott Moss) — Learn With Jason • 90 minute video by Scott Moss and Jason Lengstorf showing how to get started with Next.js
• 📺 10 Next.js Tips You Might Not Know! • 8 minute video by Lee Robinson

Data fetching

• 📺 Fetch props directly from the Database?!?! New Hooks in Next.js 9.3! • 25 minute video by Leigh Halliday showing how to fetch data directly from a database (as opposed to an API) in Next.js

Hybrid CSR, SSR, SSG and ISG

• 📺 CSR, SSR, and SSG on NextJS • 25 minute video by Blue Collar Coder showing how to build an example Pokemon directory with each approach
• 📺 Cache for Commerce Performance and Optimization for High Volume Sales • 24 minute video by Lauro Arujo explaining how to use the stale-while-revalidate caching pattern and customize the CDN and data fetching caching rukes for each page type based on how often its content is likely to change
• 📺 Responsive Rendering with Next.js • 7 minute video by Armando Gonzalez demonstrating how to swap between the mobile, desktop and SEO-only version of a component by combining SSG, SSR, useragent detection and dynamic imports

Image optimization

• 📺 Getting Lean with the Next.js Image Component • 8 minute video by Sam Selikoff showing the dramatic reduction in image file size achieved simply by rendering his site’s unoptimized images with next/image instead of a vanilla <img>
• 📺 Next.js 10’s New Image Component • 15 minute video by Leigh Halliday showing how to automatically optimize a website’s images using next/image and how it compares to other cloud-based solutions

Search Engine Optimization

• 📺 Mastering the basics of SEO in React and Next.js • 12 minute video by Leigh Halliday showing how to use next/head to insert global and page-specific SEO meta tags