Next.js Image in-depth tutorial

#nextjs #nextjsimage #vercel

The Next.js Image component is super powerful, yet can be costly if misused.  This tutorial walks you through the most important concepts behind this component and aims to show how to use this in different situations.

Supplementary repo:

https://github.com/zachgoll/nextjs-im...

Chapters (skip to the one you're interested in!):

0:00 Intro
6:21 Why should you care about Next.js Image (and images in general)?
16:35 Large images DESTROY your Lighthouse score (and how to fix it)
24:26 A costly $$ mistake with Next.js Image (hint: you might need a custom "loader")
35:53 How to use Next.js image effectively
37:00 Static (local) image usage
39:40 CLS and why Next.js Image REQUIRES a width and height
42:46 What is a LQIP (low quality image placeholder)?
48:08 How to generate your own LQIPs for remote images
57:11 What if I don't know the width/height of my image?
1:02:50 How to make your images responsive with `fill` property (no width/height required)
1:06:40 Why "srcset" and "sizes" props are SUPER important
1:30:35 Brief migration guide from next/legacy/image to next/image

Resources I mentioned in the video:

- https://nextjs.org/docs/api-reference...
- https://developer.mozilla.org/en-US/d...
- https://www.mydevice.io/
- https://developers.google.com/speed/webp

• #science_technology
• #next_js
• #nextjsimage