ReviseAlgo Logo

Interview

Next.js Interview Questions

Prepare for Next.js interviews with App Router questions, architecture prompts, debugging scenarios, and machine coding challenges.

1. Learning Objectives

By the end of this lesson, you will be able to answer common Next.js interview questions, explain architectural tradeoffs, debug production scenarios, and approach machine coding tasks with App Router patterns.

Difficulty: Advanced.

2. Prerequisites

  • App Router fundamentals.
  • Rendering strategies.
  • Server and Client Components.
  • Data fetching, mutations, SEO, performance, and deployment.

    • 3. Overview

    Next.js interviews usually test three things: whether you understand the framework model, whether you can make practical rendering and caching choices, and whether you can build a small feature cleanly under time pressure.

    4. Why This Topic Matters

    Good answers show judgment. It is not enough to say "use SSR" or "use Server Components"; you need to explain why the choice fits data freshness, personalization, SEO, bundle size, and deployment constraints.

    5. Real-World Analogy

    An interview is a code review with a stopwatch. The strongest answers are clear, scoped, and honest about tradeoffs.

    6. Core Concepts

    AreaWhat Interviewers Look For
    RoutingFile conventions, dynamic segments, layouts, route groups.
    RenderingCSR, SSR, SSG, ISR, streaming, and partial static shells.
    ComponentsServer-first thinking and small client boundaries.
    DataServer Component fetching, Route Handlers, Server Actions.
    ProductionMetadata, performance, env vars, deployment, debugging.

    7. Syntax & API Reference

    8. Visual Diagram

    9. Live Example - Full Working Code

    What just happened? The product page stays server-rendered for data, SEO, and bundle size. Only the cart button becomes a Client Component because it needs an event handler.

    10. Interactive Playground

    Practice this timed flow:

  • 5 minutes: clarify requirements and sketch route structure.
  • 15 minutes: build the smallest working feature.
  • 5 minutes: add metadata, loading, and error handling.
  • 5 minutes: explain tradeoffs and follow-up improvements.

    • 11. Common Mistakes

    MistakeWhy It HurtsBetter Answer
    Making everything a Client ComponentShips too much JavaScript.Server-first, client islands for interaction.
    Using middleware as the only auth layerAuthorization can be bypassed or drift.Recheck permissions near server data access.
    Caching personalized data globallyLeaks or stale user state.Scope cache by user or keep dynamic.
    Ignoring metadataWeak SEO and previews.Use metadata or generateMetadata.
    Skipping production buildMisses static generation and type issues.Run npm run build.

    12. Best Practices

  • Start by asking about freshness, personalization, SEO, and interaction.
  • Prefer Server Components for data and static UI.
  • Push "use client" down to the smallest interactive component.
  • Use Route Handlers for external APIs and webhooks.
  • Use Server Actions for form mutations inside the app.
  • Explain cache invalidation, not just cache creation.

    • 13. Browser Compatibility

    TopicBrowser ImpactInterview Framing
    Server ComponentsLess browser JSBetter startup and lower hydration cost.
    Client ComponentsHydrated interactionNeeded for events, state, and browser APIs.
    StreamingProgressive UIImproves perceived performance.

    14. Interview Questions

    Easy: What is the App Router?

    Answer: The routing system based on the app directory, using folders for route segments and files like page.tsx, layout.tsx, loading.tsx, and route.ts.

    Easy: What is a Server Component?

    Answer: A component that renders on the server by default in the App Router and can fetch data or use server-only resources without shipping its code to the browser.

    Medium: When should you use a Client Component?

    Answer: Use one for state, event handlers, effects, browser APIs, or client-only hooks. Keep it as small as possible.

    Medium: How do layout.tsx and template.tsx differ?

    Answer: Layouts persist across navigation and preserve state; templates remount on navigation and reset state.

    Medium: When would you use Route Handlers instead of Server Actions?

    Answer: Use Route Handlers for public APIs, webhooks, file uploads, and non-React clients. Use Server Actions for app-owned form and mutation flows.

    Hard: How would you choose between SSG, ISR, SSR, and streaming?

    Answer: Use SSG for stable public content, ISR for public content that changes periodically, SSR for request-specific or personalized data, and streaming when part of the page is slow but the shell can render early.

    Hard: How do you reduce a large Next.js bundle?

    Answer: Audit "use client" boundaries, move static heavy work to Server Components, lazy-load non-critical widgets, optimize package imports, and verify with analyzer/build output.

    Hard: How do you protect an authenticated dashboard?

    Answer: Use coarse middleware/proxy redirects if helpful, but enforce authorization inside Server Components, Server Actions, and Route Handlers before accessing user or tenant data.

    15. Debugging Exercise

    Bug report: "The dashboard shows another workspace's data when a user changes the URL."

    Solution

    The page likely trusts route params without verifying membership. Resolve the authenticated user on the server, check workspace access before every query or mutation, and return notFound(), forbidden(), or redirect when access fails.

    16. Practice Exercises

  • Easy: Explain Server vs Client Components in two minutes.
  • Medium: Design routes for a blog with tags and author pages.
  • Hard: Debug a stale product page after an inventory webhook.

    • 17. Scenario-Based Challenge

    An ecommerce product page needs SEO, a live price, recommendations, reviews, and an Add to Cart button. How should you split the page?

    Walkthrough

    Render the product shell and SEO data on the server. Use cached or revalidated data for stable content, dynamic server fetching for live price if required, Suspense for slower recommendations/reviews, and a small Client Component for Add to Cart.

    18. Quick Quiz

    1. What directive creates a client boundary? Answer: "use client". 2. What file defines an API endpoint in the App Router? Answer: route.ts. 3. What function prebuilds dynamic routes? Answer: generateStaticParams. 4. What function refreshes a path after mutation? Answer: revalidatePath. 5. What file shows a route loading state? Answer: loading.tsx.

    19. Machine Coding Challenges

    ChallengeRequirementsWhat to Watch
    Blog engine/blog, /blog/[slug], metadata, tags, 404s.Static params, stable slugs, metadata.
    Product catalog/products, filters via search params, product detail, cart button.Server-first data, client cart island.
    SaaS settingsProtected page, settings form, Server Action, revalidation.Auth checks near data access.
    Docs siteCatch-all docs route, sidebar, search index, previous/next links.Content registry and static generation.

    20. Cheat Sheet

    Interview PromptStrong Signal
    "Why App Router?"File conventions, layouts, RSC, streaming, Route Handlers.
    "Why Server Components?"Data close to source, secrets safe, less client JS.
    "Why Client Components?"Interactivity, browser APIs, hooks.
    "How do you cache?"Match cache scope to freshness and user boundaries.
    "How do you deploy?"Build, env vars, platform behavior, logs.

    21. Further Reading

  • Next.js Docs: Server and Client Components.
  • Next.js Docs: Caching.
  • Next.js Docs: Upgrading.

    • 22. Next Lesson Preview

    Next, you will take a final quiz that checks the whole Next.js course.