ReviseAlgo Logo

Interview

Quiz

Test your Next.js knowledge across routing, rendering, Server Components, data fetching, authentication, SEO, performance, deployment, and projects.

1. Learning Objectives

By the end of this quiz, you will be able to assess your readiness across the full Next.js course and identify topics to review before interviews or project work.

Difficulty: Advanced.

2. Prerequisites

  • Completion of Chapters 1 through 9.
  • Familiarity with App Router file conventions.
  • Understanding of rendering, data, auth, SEO, performance, and deployment.

    • 3. Overview

    This quiz mixes recall, scenario questions, debugging prompts, and architecture tradeoffs. Answer before opening the solution blocks.

    4. Why This Topic Matters

    Quizzes expose fuzzy understanding. If you can explain an answer quickly and correctly, you are much closer to interview and production readiness.

    5. Real-World Analogy

    The quiz is a preflight check. It does not fly the plane for you, but it catches missing pieces before takeoff.

    6. Core Concepts

    Quiz AreaSkills Tested
    RoutingRoute files, dynamic segments, layouts.
    RenderingSSG, SSR, ISR, CSR, streaming.
    ComponentsServer/client boundaries and hydration.
    DataFetching, Route Handlers, Server Actions.
    ProductionAuth, metadata, performance, env vars, deploys.

    7. Syntax & API Reference

    8. Visual Diagram

    9. Live Example - Full Working Code

    What just happened? The page fetches post data on the server, then passes serializable props to a client-side interactive component.

    10. Interactive Playground

    Score yourself:

  • 0 to 6 correct: review fundamentals and components.
  • 7 to 12 correct: review rendering, data, and caching.
  • 13 to 18 correct: practice scenarios and debugging.
  • 19+ correct: move to machine coding practice.

    • 11. Multiple Choice

    1. Which file makes /dashboard publicly routable?

    A. app/dashboard/layout.tsx B. app/dashboard/page.tsx C. app/dashboard/loading.tsx D. app/dashboard/template.tsx

    Answer

    B. A page.tsx file defines the route's UI and makes the route accessible.

    2. Which component type is the default in the App Router?

    A. Client Component B. Server Component C. Edge Component D. Static Component

    Answer

    B. Layouts and pages are Server Components by default.

    3. Which feature should force a Client Component?

    A. Reading from a database B. Using a secret API key C. Handling onClick D. Generating metadata

    Answer

    C. Event handlers require a Client Component.

    4. What is generateStaticParams used for?

    A. Creating API routes B. Prebuilding dynamic route params C. Loading browser state D. Defining middleware matchers

    Answer

    B. It returns params for dynamic routes that should be generated ahead of time.

    5. What should you use for a payment webhook?

    A. Server Action B. Client Component C. Route Handler D. Template

    Answer

    C. Webhooks are external HTTP calls and belong in Route Handlers.

    12. Scenario Questions

    6. A marketing page changes once per week and must be very fast. Which rendering strategy fits?
    Answer

    SSG or ISR. Use SSG if rebuilds are acceptable, ISR if content should refresh after a configured interval or on-demand trigger.

    7. A dashboard page is personalized per user and reads private workspace data. Which rendering strategy fits?
    Answer

    Dynamic server rendering with server-side auth and workspace checks. Avoid globally caching user-specific data.

    8. A page has a fast static shell and a slow recommendations panel. What pattern helps?
    Answer

    Use Server Components with Suspense/streaming so the shell can render while the slower section loads.

    9. A Client Component imports a heavy markdown renderer but only displays static content. What should change?
    Answer

    Move the markdown rendering to a Server Component so the heavy library stays out of the browser bundle.

    13. Debugging Questions

    10. Production build fails because DATABASE_URL is undefined during module import. What is the likely fix?
    Answer

    Avoid initializing the DB client at module scope. Use lazy initialization inside a function that runs when server code actually needs the client.

    11. A route has no loading UI while a child section is slow. What file or component can help?
    Answer

    Use loading.tsx for route-level loading, or around the slow child.

    12. A secret appears in browser JavaScript. What caused it?
    Answer

    It was probably exposed through a NEXT_PUBLIC_ variable or bundled into a Client Component import path.

    14. Interview Questions

    13. Explain Server Components in one minute.
    Answer

    Server Components render on the server, can fetch data and access secrets, reduce client JavaScript, and can pass serializable props to Client Components for interactivity.

    14. Explain the difference between Server Actions and Route Handlers.
    Answer

    Server Actions are server functions for app-owned mutations, often forms. Route Handlers are HTTP endpoints for APIs, webhooks, uploads, or external clients.

    15. How would you optimize a slow Next.js page?
    Answer

    Measure first. Reduce client JavaScript, move static work server-side, optimize images/fonts, use caching or revalidation appropriately, stream slow sections, and inspect build/analyzer output.

    15. Debugging Exercise

    Bug report: "A preview deployment works, but production uses the wrong public analytics ID."

    Solution

    Public variables prefixed with NEXT_PUBLIC_ are inlined during build. Confirm the production value existed at build time, or move runtime-specific client config behind a server endpoint.

    16. Practice Exercises

  • Easy: Score the multiple-choice section without notes.
  • Medium: Explain each scenario answer out loud.
  • Hard: Turn one debugging question into a small reproduction and fix it.

    • 17. Scenario-Based Challenge

    You are asked to build a docs site with search, metadata, MDX, nested routes, and static generation in 45 minutes. What is your plan?

    Walkthrough

    Create a content registry, generate static params for docs pages, render content through a catch-all route, build sidebar navigation from metadata, add generateMetadata, and create a lightweight client search enhancement.

    18. Quick Quiz

    1. What file creates shared UI that persists? Answer: layout.tsx. 2. What directive marks a mutation function? Answer: "use server". 3. What prefix exposes env vars to the browser? Answer: NEXT_PUBLIC_. 4. What component optimizes images? Answer: next/image. 5. What platform auto-detects Next.js projects? Answer: Vercel.

    19. Summary & Key Takeaways

  • The final quiz checks concepts, judgment, and debugging.
  • Server-first architecture is the default mental model.
  • Client Components should be intentional and small.
  • Rendering choices depend on freshness, SEO, personalization, and cost.
  • Production readiness includes env vars, metadata, build checks, and deployment behavior.

    • 20. Cheat Sheet

    Score PatternReview
    Routing missesFundamentals and App Router chapters.
    Rendering missesRendering chapter and performance chapter.
    Component missesServer and Client Components.
    Mutation missesData Fetching chapter.
    Production missesSEO, deployment, and projects.

    21. Further Reading

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

    • 22. Next Lesson Preview

    Next, you will finish with a compact cheatsheet for revision and interview prep.