Next.js interview preparation.
Turn your understanding into examples, reasoning, and clear trade-offs.
Explain before you reveal.
Choose a level, explore explained answers, then try a focused session.
9 questions
App Router vs Pages Router?
Next.js provides two routing systems: the Pages Router organizes page files, while the App Router uses nested route segments, layouts and React Server Components. They have different data-fetching and rendering conventions. Knowing which router a project uses prevents mixing APIs and assumptions from different architectures.
Server Component vs Client Component?
A Server Component runs in the server environment and does not ship its component implementation to the browser as interactive JavaScript. A Client Component is part of a client boundary and supports state, effects and browser events. In Next.js, Client Components can still contribute server-generated HTML on the initial load, so client does not mean browser-only rendering.
SSR vs CSR vs SSG vs ISR?
SSR, CSR, SSG and ISR describe when and where page content is generated. SSR renders for requests, CSR builds UI in the browser, SSG generates static content ahead of requests, and ISR refreshes generated content after deployment. The choice trades freshness, server work, cacheability and initial loading behavior.
What are streaming and Suspense?
Streaming sends ready parts of a response while slower parts are still being prepared. Suspense defines a boundary that can show fallback UI while compatible child work is pending. Together they let users see useful content sooner instead of waiting for the slowest section to finish.
Route handler vs Server Action vs middleware/Proxy?
Route handlers expose HTTP endpoints, Server Actions provide server-side functions for mutations, and middleware/Proxy can intercept requests for routing behavior. They are different entry points with different responsibilities. An action or handler exposed through the app must still validate input and enforce access near the protected work.
How should caching and revalidation work?
Caching saves a previously computed or fetched result so it can be reused, while revalidation refreshes or invalidates that stored result. A cache design needs a key, a freshness rule and a plan for changes. In Next.js there can be several caching layers, so one invalidation mechanism may not describe every layer's behavior.
How do I prevent stale search results?
Stale search results occur when requests finish in a different order from the user's inputs. A request for an older search can overwrite newer results unless the component checks which request is still relevant. Debouncing reduces request frequency but does not guarantee completion order.
How should I secure and organize a frontend?
Frontend architecture organizes components, data access and state so a feature can be understood and changed without tracing the whole app. Security defines which data and actions each user may access, and the backend must enforce it independently of visible controls. A clear API layer and explicit loading/error states also make failures easier to handle consistently.
What should I check before deploying Next.js?
Deploying Next.js means matching the application's rendering and server features with the hosting environment. A static export cannot provide every capability that requires a running server. Configuration, secrets, cache behavior and protected-route handling must therefore be checked in the actual deployment mode.
Difficulty is editorial guidance. These questions are not a ranking of interview frequency.
All Next.js interview questions by concept
Use the filters above for a practice selection, or follow the full question directory below. Each answer includes its source and explanation; difficulty labels are editorial guidance.