Interview Prep Guide

Next.js Interview Questions and Answers for Freshers to Experienced Developers

Prepare for Next.js interviews with practical questions on routing, rendering strategies, performance, data fetching, and app architecture.

Basic Next.js Interview Questions

What is Next.js and why do teams use it with React?
Next.js is a React framework that adds routing, server rendering options, build optimizations, and conventions that help teams ship production apps faster.
How does file-based routing work in Next.js?
Routes are created from the folder and file structure, so each route segment is defined by the app or pages directory layout.
What is the difference between a server component and a client component?
Server components run on the server and can avoid shipping extra JavaScript, while client components run in the browser and support interactivity and hooks.

How do SSR, SSG, and ISR differ in Next.js?
SSR renders on each request, SSG prebuilds pages at build time, and ISR allows static pages to update incrementally after deployment.
What are route handlers or API routes used for in Next.js?
They let you implement backend endpoints close to the application, which is useful for forms, webhooks, auth flows, and server-side integrations.
How do you think about images and static assets in Next.js?
Next.js helps optimize asset delivery with built-in image handling, but you still need to think about sizing, lazy loading, caching, and what should be static or dynamic.

How would you think about performance and data fetching in a large Next.js application?
Choose rendering strategy per route, fetch close to the right boundary, cache deliberately, and avoid sending unnecessary client JavaScript.
How would you reason about caching and revalidation in Next.js?
Choose caching based on how fresh the data must be, how expensive it is to fetch, and whether users need the same or personalized responses.
When would you choose the Edge runtime versus the Node runtime?
Edge is useful for low-latency lightweight logic near users, while Node is usually better when you need broader package support or heavier server capabilities.

How would you choose rendering and caching strategy for a Next.js product that has marketing pages, personalized dashboards, and fast-changing content?
Decide route by route. Use the simplest rendering model that meets freshness, SEO, and personalization needs instead of forcing one strategy across the entire app.

How do Server Components and Client Components divide responsibility?
Server Components can fetch and render on the server without shipping their component code to the browser; Client Components are used where browser APIs, state, effects, or event handlers are required.
How should caching and revalidation be chosen in a Next.js application?
Choose caching per data source from its freshness, personalization, mutation, and traffic requirements rather than applying one policy to the whole route.
How do you keep a Next.js route fast when it depends on several data sources?
Start independent requests together, stream meaningful boundaries, cache safe shared work, and avoid turning every nested component into a sequential request.

Build a small page with route data, loading states, and a clear rendering choice
Interviewers usually care less about framework trivia and more about whether your route design and fetching choices make sense. A good answer explains why data is fetched where it is and what should stay interactive on the client.
Build a route that fetches data, handles loading and error states, and justifies server versus client rendering
Strong answers keep the route simple, explain where data fetching lives, and justify what truly needs interactivity on the client. Interviewers usually want confidence in trade-offs more than a long list of framework APIs.