Next.js Developer interview question · Most asked
What does `next/image` do?
Summary
<Image> automatically resizes, optimizes and serves modern formats (WebP/AVIF), lazy-loads images by default, prevents layout shift by requiring dimensions (or fill), and generates responsive srcsets.
Longer Answer
Remote images need images.remotePatterns configured. Use priority (or fetchPriority='high') for the Largest Contentful Paint image, sizes for responsive layouts, and placeholder='blur' for nicer loading. Self-hosting needs the optimization server (or a custom loader / CDN).
Key Points
- Automatic resizing and modern formats
- Lazy loading by default
- Width/height or
fillprevents CLS priorityfor the LCP imageremotePatternsfor external hosts
More most-asked Next.js Developer questions
- How did caching defaults change in Next.js 15?
- What happens, step by step, when a request reaches a Next.js App Router application?
- How does data fetching work in the App Router?
- What are the differences between the App Router and the Pages Router?
- What is the difference between Server Components and Client Components?
- Explain the App Router file conventions: page, layout, loading, error, not-found, template and route.
- What is Next.js and what problems does it solve on top of React?
- Explain SSR, SSG, ISR and CSR in Next.js.