Guide
NEXT.JS INTERVIEW Qs
Technical questions and model answers for interviewing Next.js developers. Covers App Router, Server Components, data fetching, middleware, and caching strategies.
Last updated: May 2026
Explain the difference between App Router and Pages Router
Pages Router uses file-based routing where each file in pages/ becomes a route, requiring data fetching functions like getServerSideProps/getStaticProps. App Router, introduced in Next.js 13, uses the app/ directory, supports nested layouts, defaults to Server Components, and natively supports streaming. Gradual migration is possible and both can coexist in the same project.
What's the difference between Server Components and Client Components?
Server Components render on the server and don't ship JavaScript to the browser. They can access databases and the filesystem directly, speeding up initial loads. Client Components require the 'use client' directive, hydrate in the browser, and access browser APIs like useState and useEffect. In the App Router, the default is Server Component.
Explain data fetching patterns in Next.js
In the App Router, Server Components can use async/await directly with fetch(). Use the revalidate option for ISR, cache: 'no-store' for SSR, and the default for static generation. Server Actions let you handle form submissions server-side and update databases directly without API routes. React Query/SWR are suitable for client-side fetching in Client Components.
What are the use cases and limitations of Next.js Middleware?
Middleware runs at the Edge before a request completes. Use it for authentication checks, A/B testing, geolocation redirects, and bot detection. Limitations include partial Node.js standard API support, no direct database connections recommended, and inability to modify response bodies. Delegate complex logic to Route Handlers or Server Actions.
Explain Next.js image optimization features
The next/image component automatically optimizes images. It supports format conversion to WebP/AVIF, responsive size generation, lazy loading, and blur placeholders (placeholder="blur"). On Vercel, on-demand optimization happens at the Edge Network; self-hosted setups require the sharp library. The priority attribute enables preloading for LCP images.
Explain caching strategies in Next.js
Next.js has a multi-layered cache. The Router Cache speeds up client-side navigation, the Data Cache caches fetch() responses, and the Full Route Cache caches HTML/RSC payloads for static routes. On-demand revalidation is possible with revalidatePath/revalidateTag. Using dynamic functions like cookies() or headers() automatically opts into dynamic rendering, disabling the Full Route Cache.
Contact
Looking for a Next.js Developer?
I can support your technical interviews, advise on hiring, or join directly as your Next.js engineer.