Next.js Interview Questions

These interview questions mirror what hiring teams actually ask about modern Next.js — App Router mental models, rendering trade-offs, and debugging stale caches — with concise answers you can expand in your own words.

How to Use This Lesson

Read each question, answer aloud without looking, then compare. Interviewers care more that you can explain trade-offs (SSR vs ISR, Server vs Client Components) than that you recite filenames.

If you struggle with a topic, jump back to that lesson in this course rather than memorizing wording.

// Warm-up question candidates often get:
// "What is the difference between a Server Component and a Client Component?"

// Strong answer shape:
// 1) Where each runs
// 2) What each can / cannot do
// 3) When you choose which

Structured answers (definition → comparison → when to use) score better than one-line slogans.

Common Interview Themes

1. App Router vs Pages Router
2. Server Components / "use client"
3. SSR vs SSG vs ISR vs CSR
4. fetch caching & revalidation
5. Auth, middleware, Server Actions
6. Image/font optimization & Core Web Vitals

Expect whiteboard or live-coding of a simple app/ tree.
Be ready to debug a "stale data after POST" story.
Senior interviews probe system design: multi-tenant SEO, locales, edge auth.
Know why NEXT_PUBLIC_ exists as a security boundary.

Interview Quick-Reference

Short answers to frequent questions.

Question	Short Answer
Server vs Client Component?	Server default in app/: no hooks; Client needs `"use client"` for state/events
SSR vs SSG vs ISR?	Every request vs build-time vs static + revalidate
What is a Server Action?	Server function via `"use server"`, callable from forms/components
App vs Pages Router?	app/ + RSC vs pages/ + getServerSideProps/getStaticProps
Why next/image?	Resize, modern formats, lazy load, reserved space for CLS
Middleware role?	Edge request interception for redirects/rewrites — not sole auth

Conceptual Questions and Answers

Explain these in your own words in an interview.

Q: Why are Server Components the default in the App Router? A: They keep data access and rendering on the server and reduce client JS by default.
Q: When would you force a route dynamic? A: When the response depends on cookies/headers/user-specific data or truly cannot be cached.
Q: How do parallel routes differ from nested layouts? A: Parallel routes render multiple independent pages (slots) in one layout; nested layouts wrap a single child tree.
Q: What is the risk of trusting middleware alone for protection? A: Middleware can be bypassed for some requests; handlers/actions still need authoritative checks.

Scenario / Debugging Questions

Walk through your debugging steps out loud.

Q: Users see old product prices after an update — what do you check? A: fetch cache tags/revalidate, Server Action revalidation calls, CDN/ISR windows, and whether the route is unexpectedly static.
Q: A page is slow only in production — where do you start? A: Compare next build route types, measure data source latency, check for sequential awaits, and review Client Component bundle size.
Q: Soft nav shows a blank parallel slot — what's missing? A: Often default.tsx for that @slot.

Common Mistakes

Memorizing buzzwords without being able to sketch an app/ folder tree.
Saying "Next.js is SSR" as if every route always server-renders on each request.
Confusing Auth.js configuration versions when discussing setup.
Unable to explain the difference between redirect and notFound.

Key Takeaways

Interviewers test mental models: boundaries, rendering strategies, and caching.
Practice short structured answers, then expand with a real example.
Be ready to debug stale data and slow routes with a clear checklist.
Know App Router file conventions and modern auth patterns.
Revisit weak topics via earlier lessons instead of rote memorization.

Pro Tip

Prepare one short story from a real project ("we made a route dynamic by accident via cookies in the root layout") — concrete incidents demonstrate experience better than textbook definitions.