Question 1

What is the App Router in Next.js, and how does it differ from the Pages Router?

Accepted Answer

App Router uses the app/ directory with React Server Components by default; Pages Router uses pages/ with client-centric page components. App Router introduces nested layouts, loading/error UI, parallel/intercepting routes, and first-class server components. Routing is filesystem-based under app. Data fetching moved toward async server components and server actions rather than getServerSideProps/getStaticProps. Migration can be incremental, but mental models for caching and boundaries differ substantially.

Question 2

How do nested layouts work in the App Router?

Accepted Answer

Layouts wrap child segments and preserve state across navigations within that subtree. layout.tsx wraps page.tsx and nested routes. Root layout is required and typically holds /. Shared UI (nav, shell) lives in layouts so it does not remount on soft navigation. Soft navigation preserves client state in layouts above the changing segment.

Question 3

What are route groups and when would you use them?

Accepted Answer

Folders in parentheses like (marketing) organize routes without affecting the URL path. Use route groups to apply different layouts (marketing vs app shell) or to co-locate related routes without URL segments. They help structure large apps. Avoid overusing them when a real path segment is clearer for SEO and mental models.

Question 4

Explain loading.tsx and error.tsx in a route segment.

Accepted Answer

loading.tsx shows an instant loading UI via Suspense; error.tsx is an error boundary for that segment. Next wraps the segment in Suspense so navigations can show fallbacks. error.tsx must be a Client Component and can reset. Errors bubble to the nearest error boundary. Use them to keep shells interactive while content streams.

Question 5

What are parallel routes and intercepting routes used for?

Accepted Answer

Parallel routes render multiple pages in one layout (slots); intercepting routes show another route in the current context (e.g. modal). Slots like @modal enable dashboards with independent loading states. Intercepting (.)photo opens a modal while keeping the underlying page, with deep links still working to the full page. These patterns power polished UX without losing URL semantics.

Question 6

As a tech lead, how do you structure a large App Router codebase?

Accepted Answer

Domain-oriented route segments, shared UI in layouts, clear server/client boundaries, and co-located feature modules. Prefer feature folders with colocated components/actions/tests. Keep route files thin. Establish conventions for when to use route groups, parallel slots, and shared libraries. Document caching defaults and auth boundaries early — they dominate production incidents. Use notFound() plus not-found.tsx for expected misses.

Question 7

What are React Server Components (RSC) in Next.js?

Accepted Answer

Components that render on the server by default, can be async, and do not ship their JS to the client. RSCs can access backend resources directly, reducing client bundle size. They cannot use hooks, browser APIs, or event handlers. Composition with Client Components happens across the server/client boundary via serializable props.

Question 8

What can Server Components do that Client Components cannot?

Accepted Answer

Directly await databases/APIs, keep secrets server-side, and omit heavy logic from the client bundle. Fetch with cookies/headers, read files, and use server-only modules. Pass serializable data to Client Components for interactivity. This shifts the default toward less JS on the wire.

Question 9

Why can't you use useState or onClick in a Server Component?

Accepted Answer

Those require client runtime and interactivity; Server Components have no client hook runtime. Mark interactive leaves with 'use client'. Keep parents as Server Components when possible so only interactive islands hydrate. Passing event handlers as props from server to client is not allowed — pass data and define handlers in client code.

Question 10

How do you share data between nested Server Components without prop drilling?

Accepted Answer

Fetch where needed (React cache/dedupe) or lift data in a parent and pass props; avoid global client stores for server data. Next/fetch caching and React.cache help dedupe identical requests in one render. For cross-request sharing use proper HTTP/data cache. Don't reach for Context for server-only data trees unless you understand serialization boundaries.

Question 11

What does the server-only package prevent?

Accepted Answer

Accidentally importing server-only modules into Client Components. Importing server-only throws at build if a client bundle pulls it in — useful for DB clients and secret helpers. Pair with client-only for browser-only modules.

Question 12

How should you design the server/client component boundary?

Accepted Answer

Push 'use client' to the leaves; keep data-heavy trees on the server. Interactive widgets become client islands. Pass serializable props only. Avoid huge client wrappers. Measure bundle impact after boundary moves.

Question 13

Lead scenario: team is marking whole pages as Client Components for convenience. What do you do?

Accepted Answer

Re-establish RSC defaults, create interactive leaf patterns, lint for root-level 'use client', and educate on bundle/cost trade-offs. Provide shared client primitives (dialogs, forms). Audit top routes for unnecessary client roots. Track JS payload in CI. Make the default path the performant one.

Question 14

What does the 'use client' directive mean?

Accepted Answer

It marks a module and its transitive imports as part of the client bundle boundary. The file becomes a Client Component entry. Children imported into it are also client-side unless they are server-imported separately above the boundary. It does not mean 'only runs on client' — Client Components still SSR/hydrate.

Question 15

Do Client Components still render on the server?

Accepted Answer

Yes — they SSR for HTML, then hydrate on the client. Initial HTML can include client component output. Hydration attaches listeners. Avoid browser-only APIs during render; use effects or dynamic import with ssr: false when necessary.

Next.js Interview Questions & Answers

Next.js interview topics

All Next.js interview questions

App Router interview questions

Server Components interview questions

Client Components interview questions

Rendering interview questions

SSR interview questions

SSG interview questions

ISR interview questions

Caching interview questions

Route Handlers interview questions

Server Actions interview questions

Authentication interview questions

Middleware interview questions

Metadata interview questions

SEO interview questions

Performance interview questions

Deployment interview questions