App Router

What Is the App Router?

The App Router uses folders inside app/ to define routes, and special files inside each folder (page.tsx, layout.tsx, loading.tsx, error.tsx) to define what renders for that route. It is built from the ground up around React Server Components, meaning components render on the server by default and only ship JavaScript to the browser when explicitly marked as Client Components.

Beyond routing, the App Router adds native support for nested layouts that persist across navigations, streaming with loading.tsx and <Suspense>, colocated error boundaries with error.tsx, and Route Handlers for building API endpoints — all using the same file-based conventions as pages.

app/
  layout.tsx        // Wraps every route
  page.tsx           // Route: /
  blog/
    layout.tsx       // Wraps only /blog and its children
    page.tsx          // Route: /blog
    [slug]/
      page.tsx        // Route: /blog/:slug

Nested folders create nested routes automatically, and nested layout.tsx files compose together for each route.

Special Files the App Router Recognizes

page.tsx      // UI for a route, makes it publicly accessible
layout.tsx    // Shared UI wrapping this segment and its children
loading.tsx   // Instant loading UI shown while page.tsx streams in
error.tsx     // Error boundary UI for this segment
not-found.tsx // UI shown when notFound() is called or route is missing

• Only page.tsx (or route.ts) makes a folder segment reachable as a URL.
• layout.tsx, loading.tsx, and error.tsx are all optional but recognized automatically by name.
• Files that are not one of these reserved names are not routable — you can colocate helper files freely.
• Route segments can be nested arbitrarily deep, and each level can add its own layout/loading/error file.

App Router Cheat Sheet

The conventions you'll use in nearly every App Router route.

Server Components by Default

Every component inside app/ is a Server Component unless the file starts with a "use client" directive. This inversion (client-first React vs. server-first App Router) is the single biggest mental shift when adopting the App Router, and it's covered in depth in the Server Components and Client Components lessons later in this course.

Because Server Components can be async, data fetching often becomes as simple as calling await fetch(...) directly inside the component body — no useEffect, no loading state management for the initial render.

// app/posts/page.tsx (Server Component)
export default async function PostsPage() {
  const posts = await fetch("https://api.example.com/posts").then((r) => r.json());

  return (
    <ul>
      {posts.map((post: any) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

This entire component runs on the server; the browser only receives the final rendered HTML.

Why the App Router Replaced the Old Default

The Pages Router required data-fetching functions (getServerSideProps, getStaticProps) that lived outside the component and could not be composed per-component — a whole page shared one data-fetching strategy. The App Router lets every component fetch its own data independently, enabling more granular caching, streaming, and parallel data loading.

• Per-component data fetching instead of one function per page.
• Native nested layouts instead of manually composing _app.tsx.
• Built-in streaming and loading states instead of manual skeleton logic.
• Colocated error boundaries instead of a single global _error.tsx.

Common Mistakes

• Adding "use client" to a layout or page just to use an event handler, when only a small child component needs it.
• Expecting getServerSideProps to work inside app/ — it's a Pages Router-only API.
• Forgetting that layout.tsx state does not reset on navigation between sibling routes (use template.tsx if you need that).
• Not realizing route segments without a page.tsx are not directly navigable, even if they contain a layout.tsx.

Key Takeaways

• The App Router uses the app/ directory and file-based conventions like page.tsx and layout.tsx.
• Components inside app/ are Server Components by default and can be async.
• Special files (loading.tsx, error.tsx, not-found.tsx) are recognized automatically by name.
• Layouts persist and nest naturally across matching routes, unlike manual composition in the Pages Router.
• The App Router is the recommended default for new Next.js projects.