What is Next.js and what problems does it solve? | Interview Question

Q: What is Next.js and what problems does it solve?

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. **Difficulty:** Easy > **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the **Verified** section, against real output from a build or a running server; each Verified block names the version it ran on. ## 1. Why This Even Matters — A Story First React gives you excellent bricks. Building a house from bricks alone means designing the plumbing, wiring and foundations yourself: a router, a server, data loading, bundling, image handling. Next.js is a building kit that comes with those systems already laid out and connected. You still decide the rooms, but you do not reinvent the pipes for every house. ## 2. The Core Idea 📌 **Interview term: Framework** — a set of

The problem

Question presented to candidate: "Our team builds React single-page apps with Vite. Why would we move to Next.js, and what does it actually add on top of React?"

What a strong answer should cover:

React is a UI library; Next.js is a full-stack framework built on it that decides routing, rendering, data fetching, bundling and deployment.
It renders on the server (static, ISR, dynamic, streaming, partial prerendering), so pages arrive with content and metadata, which helps SEO and first paint.
React Server Components are the default, so server-only code and data access do not ship to the browser.
It includes file-based routing, layouts, Server Actions and Route Handlers for the backend, image and font optimization, Metadata API, and Turbopack.
The trade-off: a server runtime (or a platform), more concepts to learn (caching, server and client boundaries), and framework conventions.

Clarifying questions expected:

"Is the app mostly behind a login or public and SEO sensitive?" — server rendering matters most for public pages.
"Where will it run?" — a Node server, a platform, or static hosting changes which features are available.

Code / implementation expected: Yes — a minimal App Router app with a server page and a client component.

nextjs
react
framework
ssr

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. Difficulty: Easy

How to read this doc: Each idea is explained in plain language first, then tagged with 📌 Interview term:. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the Verified section, against real output from a build or a running server; each Verified block names the version it ran on.

1. Why This Even Matters — A Story First

React gives you excellent bricks. Building a house from bricks alone means designing the plumbing, wiring and foundations yourself: a router, a server, data loading, bundling, image handling. Next.js is a building kit that comes with those systems already laid out and connected. You still decide the rooms, but you do not re

The solution is hidden so you can try first

6 min read · 8 sections

Read the code

A minimal App Router app

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return <html lang="en"><body>{children}</body></html>;
}

// app/page.tsx (Server Component: runs on the server, ships no JavaScript)
import LikeButton from "./LikeButton";
export default async function Home() {
  const posts = await fetch("https://api.example.com/posts", { next: { revalidate: 60 } }).then((r) => r.json());
  return (
    <main>
      {posts.map((p: { id: string; title: string }) => <h2 key={p.id}>{p.title}</h2>)}
      <LikeButton />
    </main>
  );
}

// app/LikeButton.tsx (Client Component: interactive)
"use client";
import { useState } from "react";
export default function LikeButton() {
  const [likes, setLikes] = useState(0);
  return <button onClick={() => setLikes(likes + 1)}>Like ({likes})</button>;
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.