Next.js interview questions with answer outlines

Fifteen common Next.js interview questions

1. App Router versus Pages Router?
2. Server components versus client components — what can each do?
3. When do you add 'use client'?
4. Static rendering, dynamic rendering and incremental regeneration — when to use each?
5. How does data fetching work in server components?
6. How does caching and revalidation work?
7. What are server actions?
8. What are route handlers?
9. What does middleware do, and where does it run?
10. How do layouts, loading and error files work?
11. How do you handle SEO metadata?
12. What does the Image component optimise?
13. How do you handle authentication in Next.js?
14. How do you find what makes a page slow?
15. How would you deploy a Next.js app outside its default host?

Server and client components

In the App Router, components are server components by default: they run on the server, can fetch data and access secrets directly, and send no component JavaScript to the browser. Client components, marked with 'use client', run in the browser too and are needed for state, effects, event handlers and browser APIs. The good pattern is to keep most of the tree on the server and push interactivity into small client components at the leaves, passing server-rendered content as children where possible.

Rendering strategies

Data, caching and mutations

• Fetching: server components fetch with async/await directly, in parallel where possible to avoid waterfalls.
• Caching and revalidation: results can be cached and revalidated after a time or on demand by path or tag; caching defaults have changed between versions, so check the version a team uses.
• Server actions: async server functions called from forms or client components for mutations, followed by revalidation so the UI updates.
• Route handlers: API endpoints in the app directory for webhooks and external clients.

Middleware, SEO and performance

Middleware runs before a request completes — for redirects, rewrites, locale detection or checking an auth cookie — and should stay lightweight. Define SEO metadata with the metadata API or generateMetadata for dynamic pages, including Open Graph data and canonical URLs. The Image component serves responsive, lazily loaded images in modern formats with fixed dimensions to prevent layout shift; the font module self-hosts fonts to avoid layout shift and extra requests. For slow pages, check whether they render dynamically unintentionally, look for data waterfalls, oversized client bundles and unoptimised images, and measure Core Web Vitals. See frontend system design.

Deployment

Next.js can run on Node.js servers, in containers, or on platforms with adapters; static exports suit fully static sites. Self-hosting requires thinking about caching storage for regenerated pages, image optimisation and scaling. Interviewers like candidates who know what their hosting platform does for them automatically. See React interview questions.

Authentication patterns

Authentication questions are common: store sessions in secure, HTTP-only cookies, check them in middleware for coarse redirects and again in server components or route handlers for authorisation, since middleware alone isn't a security boundary. Avoid exposing secrets to client components.

Practising

The fastest way to find gaps is to be asked. Run a spoken mock round on Next.js topics — a free AI interview assistant such as CoPilot Interview builds one from your résumé and the job description and scores every answer — then study whatever you stumbled on. Build a page that mixes a static shell, a streamed slow component and a server action, and explain where each part runs.

Disclosure: CoPilot Interview is our product, so weigh what we say about it accordingly. Everything else on this page applies whichever tool you use, or none.

Frequently asked questions

What are common Next.js interview questions?

App versus Pages Router, server and client components, rendering strategies, data fetching, caching and revalidation, server actions, route handlers, middleware, layouts, metadata, image optimisation, authentication, performance and deployment.

What is the difference between server and client components?

Server components run only on the server, can access data and secrets directly and ship no component JavaScript. Client components also run in the browser and are required for state, effects and interactivity.

When should a page be static versus dynamic?

Static when content is the same for everyone and changes rarely; incremental regeneration when it changes periodically; dynamic when it depends on the request or user.

What are server actions?

Async functions that run on the server, callable from forms or client components to perform mutations, typically followed by revalidating affected data.