easyFrontend

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

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

**TL;DR.** 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 bracket folders like [id] create **dynamic** segments. app/ page.tsx → / blog/page.tsx → /blog blog/[slug]/page.tsx → /blog/:slug <te

922 views

Understand the problem

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

nextjsroutingapp-routerfile-based

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

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)

Join the discussion

Discussion (0)

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

How does client-side navigation work in Next.js (next/link and useRouter)?

What is Next.js and what problems does it solve?