App Router overview

Last reviewed Jun 1, 2026 Content v20260601

Track mode

client_nextjs

Means

In-browser Next.js (client components)

Reading

~2 min

Level

beginner

This lesson

An orientation to the Next.js track—how the playground works, vocabulary, and what you will build next.

Routing maps URLs to components—guards and resolvers protect enterprise flows.

You will apply App Router overview in contexts like: Marketing sites, dashboards, e-commerce, and Vercel-style deployments that need hybrid static + dynamic pages.

Write TSX for Client Components, click Run—React 18 CDN + in-browser TSX compile; use client/server lessons explain App Router concepts; mountApp renders interactive UI; printOutput feeds the terminal.

After solid JavaScript—and ideally TypeScript—before starting the nextjs track.

The App Router maps folders under app/ to URL segments. Each route folder can contain a page.tsx (UI for that segment), a layout.tsx (shared shell), and optional special files for loading, errors, and data.

Minimal project shape

app/
  layout.tsx      # root shell (html, body, nav)
  page.tsx        # /
  about/
    page.tsx      # /about
  blog/
    [slug]/
      page.tsx    # /blog/:slug

Key ideas

Layouts persist — navigating between sibling routes keeps shared layout state (e.g. sidebar open)
Server Components by default — files in app/ are Server Components unless marked 'use client'
Colocation — UI, loading, and error boundaries live next to the route they serve
Nested routes — folders mirror URL structure; optional route groups (marketing) organize without affecting the URL

Request flow (simplified)

A browser requests /blog/hello. Next.js matches app/blog/[slug]/page.tsx, runs Server Components on the server, streams HTML, and hydrates Client Component islands in the browser.

Important interview questions and answers

Q: What file makes a route publicly accessible?
A: page.tsx (or page.js)—folders alone do not create routes.
Q: layout.tsx vs page.tsx?
A: Layout wraps child segments and persists across navigation; page is the leaf UI for that URL segment.
Q: Default component type in app/?
A: Server Component—opt into client with 'use client'.

Self-check

Which file would you add for /pricing?
Why do layouts not remount on sibling navigation?

Tip: Only page.tsx creates a public URL—colocate helpers in _components or route groups (marketing) without adding segments.

Interview prep

What makes a route public?: A page.tsx in the folder path—folders alone or layouts do not create browseable URLs.

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

app/ vs pages/ mental model?
What is a layout file?

No discussion yet. Be the first to ask a question.