01 / 03

What is Next.js?

Next.js is a popular open-source fullstack JavaScript framework for building React-based applications with server-side rendering (SSR) and static site generation (SSG).

Difficulty: 6/10
Topics: SSR, Routing, API routes

Scenario Questions

0-2 years experience
  1. 1

    We need a new "About" page in our Next.js project. How would you create it and make sure it’s reachable via /about?

  2. 2

    If you add a component file inside the pages folder, what does Next.js automatically do with that file?

  3. 3

    What happens under the hood when you navigate from one page to another using the Next.js Link component?

2-5 years experience
  1. 1

    Our product‑list page uses getServerSideProps and is loading slowly during peak traffic. How would you diagnose and improve its performance?

  2. 2

    We have a page that rarely changes but must be SEO‑friendly. Would you use getStaticProps with revalidation or getServerSideProps, and why?

  3. 3

    You added an API route at /pages/api/user.js that returns JSON, but the client receives a 404. What could be causing that?

5-8 years experience
  1. 1

    Design a strategy for an e‑commerce site that needs SEO, personalized content, and frequent inventory updates using Next.js features.

  2. 2

    How would you implement caching and invalidation for a large number of ISR pages to keep them fresh without overwhelming the origin server?

  3. 3

    Explain how you would organize a monorepo that contains several Next.js apps sharing UI components and utilities while avoiding version conflicts.

8+ years experience
  1. 1

    Our legacy React SPA must be migrated to Next.js across multiple product teams. Outline the migration plan, key risks, and how you’d keep both teams productive during the transition.

  2. 2

    Multiple teams need consistent routing conventions and data‑fetching patterns across dozens of Next.js services. What governance and architectural guidelines would you establish?

  3. 3

    For a global SaaS platform with strict multi‑tenant isolation, how would you leverage Next.js to enforce tenant boundaries while still delivering high performance at scale?

Follow-up Questions

  • Why would you pick static generation over server‑side rendering for a given page?
  • How does Next.js handle client‑side navigation differently from a plain React app?
  • What are the trade‑offs of using API routes versus a separate backend service?