Next.js Developer interview question · Most asked
How do you optimize Core Web Vitals in a Next.js app?
Summary
Minimize client JavaScript (keep components on the server, push 'use client' down the tree), optimize the LCP image with next/image priority, use next/font, stream slow content with Suspense, avoid layout shift with sized media, and defer third-party scripts with next/script strategies.
Longer Answer
Analyze bundles with @next/bundle-analyzer, lazy-load heavy client components with next/dynamic, and avoid large client-side libraries for things the server can do. Measure with Lighthouse, Web Vitals reporting (useReportWebVitals) and real-user monitoring (INP, LCP, CLS).
Key Points
- Less client JS via Server Components
- LCP image priority
- Stream slow sections
- Bundle analysis + dynamic imports
- Measure INP/LCP/CLS in the field
More most-asked Next.js Developer questions
- How does data fetching work in the App Router?
- How did caching defaults change in Next.js 15?
- What happens, step by step, when a request reaches a Next.js App Router application?
- What is Next.js and what problems does it solve on top of React?
- 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.
- Explain SSR, SSG, ISR and CSR in Next.js.