Sign in
Skip to solution
easyFrontend

How does file-based routing work in the Next.js App Router?

922 views
01

Understand the problem

Folders map to URL segments; page.js makes a route public.

nextjsroutingapp-routerfile-based
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

In the App Router, folders under app/ define URL segments and a page.js (or .tsx) makes that segment a publicly routable page. Special files (layout, loading, error, route) add behavior, and folder names like [id] create dynamic segments.

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

Folder layout → routes
app/
  page.tsx                 # /
  about/page.tsx           # /about
  blog/
    page.tsx               # /blog
    [slug]/page.tsx        # /blog/:slug   (params.slug)
  (marketing)/
    pricing/page.tsx       # /pricing      (group adds no segment)
  api/users/route.ts       # /api/users    (Route Handler)
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 4 of 95 decoded in the Next.js track. One more won't hurt.

Back to track