What are the special files in the Next.js App Router (page, layout, loading, error)?

Q: What are the special files in the Next.js App Router (page, layout, loading, error)?

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. **Difficulty:** Medium > **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 Picture a theatre stage. The layout is the building: it stays up between shows. The template is the stage set, rebuilt for every show. The loading file is the curtain with "starting soon" painted on it, raised as soon as the audience is seated. The error file is the stage manager who steps out when something breaks and offers to restart the scene, and the not-found file is the sign that says there is no show tonight. Ea

The problem

Question presented to candidate: "Name the special files you can put in an App Router segment and tell me what each one does. In what order do they wrap the page?"

What a strong answer should cover:

page renders the route and makes it public; layout wraps it and persists across navigation; template wraps it but remounts on every navigation.
loading becomes a Suspense fallback around the page, so the server can stream it immediately.
error must be a Client Component and becomes an error boundary; its retry prop (stable since 16.3) re-fetches and re-renders the segment, reset only clears the error. Production sends only an error digest, not the message.
not-found renders when notFound() is called; global-error, route, default and metadata files complete the set.
The nesting order: layout, then template, then error, then loading, then not-found, then the page.

Clarifying questions expected:

"Should the error screen replace the navigation too?" — an error file does not catch errors in the layout of the same segment.
"Do you need a real 404 status code?" — it depends on whether anything streamed before notFound() ran.

Code / implementation expected: Yes — a segment with each file, and what each renders.

nextjs
app-router
conventions
routing

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: Medium

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

Picture a theatre stage. The layout is the building: it stays up between shows. The template is the stage set, rebuilt for every show. The loading file is the curtain with "starting soon" painted on it, raised as soon as the audience is seated. The error file is the stage manager who steps out when something breaks and of

The solution is hidden so you can try first

7 min read · 8 sections

Read the code

One segment with each special file

// app/dashboard/layout.tsx  -> stays mounted across /dashboard/* navigations
export default function Layout({ children }: { children: React.ReactNode }) {
  return <section><aside>sidebar</aside>{children}</section>;
}

// app/dashboard/loading.tsx -> streamed immediately while the page loads
export default function Loading() {
  return <p>Loading dashboard...</p>;
}

// app/dashboard/error.tsx -> must be a Client Component
"use client";
export default function Error({ error, retry }: { error: unknown; retry: () => void }) {
  // error is typed unknown: narrow it before reading digest or message
  const digest = error instanceof Error ? (error as Error & { digest?: string }).digest : undefined;
  return (
    <div>
      <p>Something went wrong (ref {digest})</p>
      <button onClick={() => retry()}>Try again</button>
    </div>
  );
}

// app/dashboard/not-found.tsx -> shown when notFound() is called below
export default function NotFound() {
  return <p>No such dashboard.</p>;
}

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.