Question 1

Which Next.js tools help image performance?

Accepted Answer

next/image for responsive sizes, lazy loading, modern formats, and CLS prevention. Always set dimensions/aspect. Avoid shipping huge unoptimized images. Configure remotePatterns for external loaders.

Question 2

How does next/font improve performance?

Accepted Answer

Self-hosts fonts, reduces layout shift, and avoids render-blocking third-party font CSS. Subset fonts. Limit weights. Prefer variable fonts when appropriate.

Question 3

What causes large client bundles in Next apps?

Accepted Answer

Root-level 'use client', heavy UI libs in client trees, barrel imports, and unnecessary polyfills. Analyze with bundle analyzer. Push boundaries down. Prefer RSC for data display.

Question 4

How do you optimize data fetching waterfalls?

Accepted Answer

Fetch in parallel, compose with Suspense, cache shared lookups, and avoid sequential awaits when independent. Lift common fetches or use Promise.all. Watch component trees that await parent-before-child unnecessarily.

Question 5

Explain good loading UX with streaming.

Accepted Answer

Shell + skeletons via loading.tsx/Suspense; prioritize above-the-fold content. Don't block chrome on slow widgets. Measure LCP element ownership.

Question 6

When is Edge rendering a performance win?

Accepted Answer

When work is light and close to users; not when Node-heavy ORMs dominate. Geo/auth redirects shine at Edge. Heavy SSR may be better on Node near the DB (regional).

Question 7

Lead: set performance budgets for a Next.js org.

Accepted Answer

Budgets for JS KB, LCP/INP, TTFB by route class; CI checks; RUM dashboards; ownership per template. Classify routes (marketing vs app). Block regressions in PRs. Pair budgets with caching SLOs.

Performance Next.js Interview Questions

Other Next.js interview topics