📘 Next.js Interview Playbook

The other pages teach the material. This page is for rehearsal: a question bank with what a strong answer contains, predict-the-behavior puzzles, machine coding tasks that come up in live rounds, design prompts, and a study plan.

Table of Contents

1. What Interviewers Look For
2. Question Bank
3. Predict the Behavior
4. Machine Coding Tasks
5. System Design Prompts
6. Production Scenarios
7. Cheat Sheets
8. Common Mistakes
9. Study Plan

1. What Interviewers Look For

Signals that raise your rating:

• Always saying where code runs (build, server request, browser) and what is cached.
• Naming the trade-off: static speed vs freshness, bundle size vs interactivity, convenience vs control.
• Knowing what is current (async request APIs, proxy.ts, Turbopack default, "use cache" and Cache Components, React 19.2 features) and which advice is from the older caching model.
• Treating Server Actions and Route Handlers as public endpoints that need authn, authz, and validation.
• Proposing how you would measure and verify: build output table, bundle analyzer, RUM, Playwright against a production build.

2. Question Bank

2.1 Fundamentals (10)

2.2 Rendering and Server Components (10)

2.3 Routing and Data (10)

2.4 Mutations, Security, and Auth (10)

2.5 Performance and Operations (10)

3. Predict the Behavior

3.1

// app/page.tsx  (no directive)
import { useState } from 'react';

export default function Page() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

Answer: build error: useState and event handlers are not allowed in Server Components. Add 'use client' at the top, or better, extract the button into a small Client Component and keep the page on the server.

3.2

// app/blog/[slug]/page.tsx
export default function Page({ params }: { params: { slug: string } }) {
  return <h1>{params.slug}</h1>;
}

Answer: in current versions params is a Promise, so params.slug is undefined (and TypeScript/dev warnings flag the sync access). Make the component async and const { slug } = await params.

3.3

export default async function Page() {
  const user = await getUser();          // 300 ms
  const posts = await getPosts();        // 300 ms
  return <Dashboard user={user} posts={posts} />;
}

Answer: about 600 ms because the awaits are sequential even though they are independent. Use Promise.all([getUser(), getPosts()]) (about 300 ms), or split into two components under separate Suspense boundaries.

3.4

'use cache';
export default async function Page() {
  const theme = (await cookies()).get('theme')?.value;
  return <Themed theme={theme} />;
}

Answer: error: request-specific APIs such as cookies() cannot be used inside a cached scope, because the cached result would be shared between users. Read the cookie in an uncached parent and pass it as an argument to a "use cache" child, or cache nothing here.

3.5

// Server Component
<Button onClick={() => console.log('hi')} />   // Button is a Client Component

Answer: error: functions cannot be passed from a Server Component to a Client Component, since they are not serializable. Define the handler inside the Client Component, or pass a Server Action (marked 'use server').

3.6

'use server';
export async function save(formData: FormData) {
  try {
    await db.save(formData);
    redirect('/done');
  } catch (e) {
    return { error: 'failed' };
  }
}

Answer: the user is never redirected on success. redirect() throws a special error, the catch swallows it, and the action returns { error: 'failed' }. Call redirect outside the try/catch.

3.7

'use client';
export function Clock() {
  return <p>{new Date().toLocaleTimeString()}</p>;
}

Answer: hydration mismatch warning. The server renders one time and the client renders another when hydrating. Render a stable value first and update in useEffect, or render the time only after mount.

3.8

// app/dashboard/layout.tsx
export default async function Layout({ children }: { children: React.ReactNode }) {
  const session = await getSession();
  if (!session) redirect('/login');
  return <>{children}</>;
}

Answer: not sufficient as the only protection. Layouts do not re-render when navigating between child pages and pages can be rendered independently, so a check here can be skipped. Verify authorization in each page and in the data access layer, Actions, and Route Handlers that touch the data.

3.9

// app/api/items/route.ts
export async function GET() {
  return Response.json(await db.item.findMany());
}

Answer: in current versions this GET is not cached; it runs on every request. In Next 13/14 it was cached by default at build time and returned stale data. Opt in to caching explicitly with "use cache" or dynamic = 'force-static' and revalidate with a tag.

3.10

// Server Action
export async function addTodo(formData: FormData) {
  'use server';
  await db.todo.create({ data: { title: String(formData.get('title')) } });
}
// UI still shows the old list after submit

Answer: the mutation worked but no cache was invalidated, so the list (cached or Router Cache) is stale. Call revalidatePath('/todos'), updateTag('todos'), or refresh() at the end of the action.

3.11

const { data } = useSearchParams();   // inside a statically rendered page, no Suspense

Answer: useSearchParams returns a URLSearchParams, not { data }, and, more importantly for builds, using it without a Suspense boundary in a static page makes next build fail with a "missing suspense boundary" error. Wrap the component in <Suspense>.

3.12

<Image src="https://cdn.example.com/a.jpg" alt="" />

Answer: error: missing width/height (or fill) for a remote image, and the host must be allowed in images.remotePatterns. Provide dimensions or fill with a sized parent, and configure the host.

4. Machine Coding Tasks

Typical 60 to 90 minute live tasks, with what to show:

Structure your solution like production code: typed props, schema validation shared by client and server, a data access module, a short note on caching and revalidation, and what you would test.

5. System Design Prompts

Frame every answer with: requirements (SEO? personalization? scale? freshness?), rendering strategy per page type, data flow and caching, auth and security, performance budget, deployment, and monitoring.

See Frontend System Design for the general framework.

6. Production Scenarios

7. Cheat Sheets

7.1 Server or Client Component?

7.2 Which data approach?

7.3 Which revalidation?

7.4 Version facts worth knowing

8. Common Mistakes

9. Study Plan