Understanding Next.js App Router: The Mental Model That Makes It Click

A practical guide to server components, routing conventions, and the special files that power modern Next.js apps v14.2.15

Example layout.tsx

In this article:

1.Server components 2. Client components 3. File-system routing 4. Server actions 5. Route handlers 6. page.tsx 7. layout.tsx 8. loading.tsx 9. error.tsx 10. not-found.tsx

If you’ve ever stared at a Next.js project and wondered why your component is fetching data on the server in one file but throwing a hydration error in another, you’re not alone. The App Router isn’t complicated — it just requires a different mental model than the Pages Router that most of us learned first.

Think of your app as a request pipeline, not a collection of pages.

Request → Route match → Layout(s) → Page → Optional loading/error/not-found UI → Response

The mental model

The App Router as a pipeline:

Before diving into individual concepts, here’s the single diagram that contextualizes everything that follows.

App Router Flow (Nextjs version: 14.2.15)

1. Server Components

In the App Router, every component is a Server Component by default. That single sentence is responsible for most of the confusion (and most of the power) one will encounter in a Next.js project.

Server components render entirely on the server. They never ship to the browser. This means application can talk directly to the database, read environment secrets, and do expensive data fetching — none of which leaks to the client, and none of it bloats the JavaScript bundle.

Example:
// app/profile/[username]/page.tsx
// No "use client" = Server Component by default

import { db } from "@/lib/db";
import { notFound } from "next/navigation";

export default async function ProfilePage({
  params,
}: {
  params: { username: string };
}) {
  // Direct DB call — never exposed to the browser
  const user = await db.user.findUnique({
    where: { username: params.username },
  });

  if (!user) notFound();

  return (
    <main>
      <h1>{user.name}</h1>
      <p>@{user.username}</p>
    </main>
  );
}

2. Client Components

The moment a user need to do something — click, toggle, type, drag — we need a Client Component. These run in the browser and are required for interactivity.

When needed:

useState, useEffect, event handlers, browser APIs Real-time UI interactions (click, toggle, form local state).

Example:

"use client";

import { useState } from "react";

export default function LikeButton({ postId }: { postId: string }) {
  const [liked, setLiked] = useState(false);
  const [count, setCount] = useState(0);

  const handleLike = () => {
    setLiked((prev) => !prev);
    setCount((prev) => prev + (liked ? -1 : 1));
  };

  return (
    <button onClick={handleLike} aria-pressed={liked}>
      {liked ? "♥ Liked" : "♡ Like"} · {count}
    </button>
  );
}

Pattern:

• Keep page as server component
• Pass minimal props to small client components for interaction

3. File System Routing

4. Server Actions

Server Actions are async functions that run on the server, callable from forms or client components. They’re the App Router’s answer to the question: “How do I submit a form without writing a REST endpoint?”

Mark a function with “use server” and pass it directly to a form’s action prop. Next.js handles the network boundary — no fetch calls, no API routes, no CORS headers.

Example:

// actions/post.action.ts
"use server";

import { db } from "@/lib/db";
import { revalidatePath } from "next/cache";
import { getServerSession } from "next-auth";

export async function createPost(formData: FormData) {
  // 1. Always validate input
  const content = String(formData.get("content") || "").trim();
  if (!content) throw new Error("Content is required");

  // 2. Always check auth
  const session = await getServerSession();
  if (!session) throw new Error("Unauthorized");

  // 3. Mutate
  await db.post.create({
    data: { content, authorId: session.user.id },
  });

  // 4. Revalidate the cache
  revalidatePath("/");
}

// Using the action in a form component
import { createPost } from "@/actions/post.action";

export default function CreatePostForm() {
  return (
    <form action={createPost}>
      <textarea name="content" placeholder="What's on your mind?" />
      <button type="submit">Post</button>
    </form>
  );
}

5. Route Handlers: explicit HTTP endpoints

Sometimes we need a proper HTTP API — not a form mutation, but an endpoint that external services, mobile apps, or webhooks can call. That’s what route.ts is for.

Route handlers live in route.ts files and export named functions corresponding to HTTP methods: GET, POST, PUT, DELETE, etc. We get full control over request parsing and response shaping.

Example:

// app/api/posts/route.ts
import { NextRequest, NextResponse } from "next/server";
import { db } from "@/lib/db";

export async function GET(req: NextRequest) {
  const posts = await db.post.findMany({
    orderBy: { createdAt: "desc" },
    take: 20,
  });
  return NextResponse.json(posts);
}

export async function POST(req: NextRequest) {
  const body = await req.json();

  if (!body.content) {
    return NextResponse.json(
      { error: "Content is required" },
      { status: 400 }
    );
  }

  const post = await db.post.create({
    data: { content: body.content },
  });
  return NextResponse.json(post, { status: 201 });
}

6. Page.tsx

page.tsx is what makes a folder into a visitable route. Without it, the folder is just an organizational container — no page renders, no URL is accessible.

Think of it simply: page.tsx is what the user sees at this URL. It’s a server component by default, which means we can fetch exactly the data we need right inside it — no separate loader function, no useEffect on mount.

Example:

app/dashboard/page.tsx

import { Suspense } from "react";
import { getMetrics } from "@/lib/metrics";
import FeedWidget from "./FeedWidget";

// Metadata export — for SEO
export const metadata = {
  title: "Dashboard",
  description: "Your activity at a glance",
};

export default async function DashboardPage() {
  const metrics = await getMetrics();

  return (
    <div>
      <h1>Dashboard</h1>
      <MetricsGrid data={metrics} />
      <Suspense fallback={<Spinner />}>
        <FeedWidget />
      </Suspense>
    </div>
  );
}

7.Layout.tsx

While page.tsx re-renders on every visit, layout.tsx persists. It wraps all pages within its segment and survives client-side navigation — the navbar and sidebar don’t flash or remount as users move between routes.

Every app needs a root layout at app/layout.tsx that provides the end tags. Beyond that, we can add nested layouts for specific sections — an authenticated layout, an admin layout, a settings layout. Ideal for navbar, sidebar, theme providers, shell structure

// app/layout.tsx — root layout (required)
import Navbar from "@/components/Navbar";
import "./globals.css";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Navbar />
        <main>{children}</main>
      </body>
    </html>
  );
}

// app/(dashboard)/layout.tsx — nested layout for dashboard routes
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="dashboard-shell">
      <Sidebar />
      <section>{children}</section>
    </div>
  );
}

8.Loading.tsx

When a server component is doing async work — fetching data, querying a database — Next.js can show a loading UI while it waits. No isLoading state, no manual Suspense setup. Just add a loading.tsx file.

Internally, Next.js wraps the page.tsx in a Suspense boundary with loading.tsx as the fallback. The loading UI streams to the browser immediately while the actual page content resolves on the server. This is what makes Next.js feel instant even on slow data fetches.

// app/notifications/loading.tsx
export default function LoadingNotifications() {
  return (
    <div className="space-y-4">
      {Array.from({ length: 5 }).map((_, i) => (
        <div
          key={i}
          className="skeleton-row animate-pulse"
        />
      ))}
    </div>
  );
}

9.Error.tsx

What happens when a server component throws? Without an error boundary, the entire page crashes. With error.tsx, we get segment-level error recovery — the error is contained, and the user gets a helpful UI with a way to recover.

Important: error.tsx must be a client component (add “use client”) because error boundaries in React are a client-side concept. It receives the error object and a reset function we can call to retry the failed segment.

"use client";

// app/notifications/error.tsx
export default function NotificationsError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <div role="alert">
      <h2>Couldn't load notifications</h2>
      <p>{error.message}</p>
      <button onClick={() => reset()}>
        Try again
      </button>
    </div>
  );
}

10.Not-found.tsx

There’s a meaningful difference between something broke (error boundary) and this resource doesn’t exist (not-found). Next.js provides a separate file for the latter, triggered explicitly with notFound() from next/navigation.

Call notFound() when a database lookup returns null. This interrupts rendering and displays the not-found.tsx UI — with the correct 404 status code, no tricks required.

// app/profile/[username]/page.tsx
import { notFound } from "next/navigation";

export default async function ProfilePage({
  params,
}: {
  params: { username: string };
}) {
  const user = await getUser(params.username);

  // Triggers not-found.tsx automatically
  if (!user) notFound();

  return <div>{user.name}</div>;
}

// app/not-found.tsx
import Link from "next/link";

export default function NotFoundPage() {
  return (
    <div>
      <h1>404 — Page not found</h1>
      <p>The page you're looking for doesn't exist.</p>
      <Link href="/">Go home</Link>
    </div>
  );
}

Recap: Quick Practical Mental Model:

• Read data in server components.
• Keep client components small and interaction-focused.
• Use server actions for internal mutations(Read/Write/Update/Delete)
• Use route handlers for external/public HTTP use cases.
• Add loading.tsx, error.tsx, and not-found.tsx per critical route segment for production-grade UX.

These are few of the important concepts in Nextjs, please feel free to add in comments, if you would like to include any other concepts.

Happy Reading!!!!