Using Images in Next.js (next/image examples)

Learn how to use the Next.js Image Component (next/image) to automatically optimize images and prevent layout shift, helping provide a better user experience for your visitors.

0:00 – Introduction
0:34 – Using next/image
1:21 – Image component HTML output
2:00 – Image optimization
3:02 – Remote images
4:19 – Background images
5:03 – Image sizes and fill
6:29 – Image grid with fill
7:41 – Responsive images
8:19 – Image API reference and loaders
9:00 – Conclusion

◆ Docs: https://nextjs.org/docs/app/building-your-application/optimizing/images
◆ API reference: https://nextjs.org/docs/app/api-reference/components/image
◆ Example: https://github.com/vercel/next.js/tree/canary/examples/image-component