Next.js Advanced Features
Image optimization, Font optimization, Script optimization, analytics, edge runtime, experimental features
1What is the main advantage of using next/image compared to a standard img tag?
What is the main advantage of using next/image compared to a standard img tag?
Answer
next/image automatically optimizes images by generating multiple sizes and modern formats (WebP, AVIF), applies lazy loading by default, and improves Web Vitals by preventing Cumulative Layout Shift through automatic dimension calculation. Unlike a standard img tag that loads the original image, next/image serves the optimal size based on viewport and device pixel ratio. This approach significantly reduces loading time and bandwidth consumption.
2When to use the priority property on a next/image component?
When to use the priority property on a next/image component?
Answer
The priority property disables lazy loading and preloads the image immediately, which is crucial for above-the-fold images that impact Largest Contentful Paint (LCP). Without priority, these critical images would be lazy loaded, delaying LCP and degrading Core Web Vitals. Use priority only for 1-2 images visible on initial page load, typically hero images or main banners.
3Which next/image configuration allows serving images from an external domain?
Which next/image configuration allows serving images from an external domain?
Answer
The remotePatterns property in next.config.js allows defining authorized external domains for serving images, with granular control over protocol, hostname, port and pathname. This approach replaces the deprecated domains property and offers enhanced security by precisely limiting authorized sources. Configuring remotePatterns prevents 400 errors when loading images hosted on CDNs or third-party services like Cloudinary or AWS S3.
What is the difference between fill and responsive for next/image sizing?
How to optimize static images imported locally with next/image?
+21 interview questions
Other React / Next.js interview topics
JavaScript Essentials
React Fundamentals
React Hooks
Component Lifecycle
React Router
State Management with Context
Forms & Controlled Components
Data Fetching & API
React Query (TanStack Query)
Styling & CSS-in-JS
Next.js Fundamentals
TypeScript with React
Next.js Data Fetching
Next.js Server Actions
Next.js Routing & Navigation
Next.js API Routes
Next.js Metadata & SEO
Next.js Middleware & Auth
React Testing
Zustand State Management
React Performance Optimization
Error Boundaries & Error Handling
Advanced React Patterns
Next.js Deployment & Production
Architecture & Design Patterns
React Server Components
Next.js Internationalization
React Security & Best Practices
Master React / Next.js for your next interview
Access all questions, flashcards, technical tests, code review exercises and interview simulators.
Start for free