Beginnernote 03 of 1103 reasons · 03 notes
Next.jsBeginner
Let next/image do the heavy lifting
Automatic resizing, lazy loading, and modern formats ship out of the box.
Code example
Copy, adapt, and ship.
Read the numbered lines, copy the complete snippet, then adjust the values for your project.
import Image from "next/image"; export function ProductHero({ product }) { return ( <Image src={product.image} alt={product.name} width={1200} height={800} priority sizes="(max-width: 768px) 100vw, 50vw" className="h-auto w-full object-cover" /> );}Why this matters
The production reason.
- 01
Manual image tags usually miss a detail: responsive sizes, lazy loading, width and height, or modern format delivery.
- 02
next/image gives the browser predictable dimensions and lets the framework generate smaller assets for the device actually viewing the page.
- 03
The biggest win comes from writing accurate sizes, because that tells the browser which generated image is worth downloading.
How it holds up outside a demo.
- Next.jsUse priority only for above-the-fold hero images.
- Shopify or CMSStore clear alt text with the asset, not inside the component.
- WordPressPrefer optimized source uploads before Next.js generates variants.
Explore other stacks
Jump into a different technology.
11 Next.js notes on this shelf, and six more stacks beside it.
Keep state close to the interaction
Local state avoids unnecessary parent renders and keeps component intent obvious.
Open the noteAbort stale fetch requests
Cancel outdated browser requests so fast UI changes do not render old data.
Open the noteBuild a CSS gradient generator with code export
A CSS gradient generator should preview color stops, preserve accessible contrast, and export clean CSS code.
Open the noteFix WordPress H1 SEO issues
Fix WordPress SEO issues by keeping one clear H1, escaping template output, and compressing images before WordPress upload.
Open the noteReduce LCP with image optimization
Reduce LCP with image optimization by resizing, converting, and compressing images before they reach production.
Open the noteUse real buttons for actions
If it changes state, use button. If it navigates, use a link.
Open the note