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.

App Router Next.js Interview Questions

Other Next.js interview topics