Next.js
Updated 3 weeks ago
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.