Single File Uploads, Images, and Static Assets in Next.js

Images are usually the heaviest thing a page loads. Optimising them is the easiest performance win around.

The Next.js Image component

Automatic resizing, modern formats, and lazy loading come free with the Image component. It serves the right size to the right screen.

Managing uploads

Handle file uploads through an API route or storage provider, validate types and sizes, and serve them back through a stable URL.

Static asset hygiene

Import local assets so bundlers hash and optimise them, and avoid pulling heavy remote images into the critical path.

Wrapping up

Treat images as first-class performance concern and both your load times and Core Web Vitals improve immediately.