mediumFrontend

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)?

**TL;DR.** The App Router recognizes **convention files** per segment: page (route UI), layout (shared shell), loading (Suspense fallback), error (error boundary), not-found (404), route (API handler), and template (re-mounting layout). Next.js wires them into the route tree automatically. layout.tsx (shared shell) error.tsx (boundary) loading.tsx (Suspense fallback) <rect class='d-box-accent' x='110' y='104' width='24

497 views

Understand the problem

Convention files that define UI and behavior per route segment.

nextjsapp-routerconventionsrouting

Attempt it yourself

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

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

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

Join the discussion

Discussion (0)

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

What is JSON-LD structured data and how do you add it in Next.js?

How does the Metadata API work in Next.js (static and generateMetadata)?