Sign in
Skip to solution
mediumFrontend

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

497 views
01

Understand the problem

Convention files that define UI and behavior per route segment.

nextjsapp-routerconventionsrouting
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

page.js (route UI), layout.js (shared shell), loading.js (Suspense fallback), error.js (error boundary), not-found.js (404), route.js (API handler), and template.js (re-mounting layout). Next.js wires them into the route tree automatically.

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

A segment's convention files
app/dashboard/
  layout.tsx      # shared shell (sidebar/nav)
  template.tsx    # re-mounts each navigation (optional)
  loading.tsx     # streamed fallback while page data loads
  error.tsx       # 'use client' error boundary with reset()
  not-found.tsx   # 404 UI for this segment
  page.tsx        # the actual /dashboard UI
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 54 of 95 decoded in the Next.js track. One more won't hurt.

Back to track