Getting Started with Next.js 14 App Router

The App Router in Next.js 14 is the most significant shift in how we build React applications since hooks. If you've been holding off, this is your guide to the mental models that make it all click.

Why the App Router?

The Pages Router served us well for years, but it had a few rough edges. Client-side navigation meant shipping more JavaScript than necessary, and splitting server and client components was awkward.

The App Router fixes this by building on React Server Components as the default. Components render on the server unless you explicitly opt into client-side rendering.

Server vs. Client Components

This is the single most important concept to internalize.

The "use client" directive

Add the "use client" directive at the top of a file to mark it as a client component. Everything without that directive is a server component by default.

// app/counter.tsx
"use client";
 
import { useState } from "react";
 
export function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount((c) => c + 1)}>
      Clicked {count} times
    </button>
  );
}

Data Fetching

You can fetch directly in a server component — no getServerSideProps needed. Next.js extends fetch with request memoization and caching.

// app/blog/page.tsx
export default async function BlogIndex() {
  const posts = await fetch("https://api.example.com/posts", {
    next: { revalidate: 60 }, // ISR: revalidate every 60s
  }).then((res) => res.json());
 
  return <PostList posts={posts} />;
}

Layouts and Nesting

Layouts wrap child segments and persist across navigation. Define a root layout once and it applies to every route.

Layouts are the secret weapon of the App Router. They let you compose shared UI — headers, footers, sidebars — without repeating yourself.

Colocation

You can colocate non-route files inside app/ by wrapping them in a folder, or by giving them a name that isn't page, layout, loading, etc.

Summary

• Server components are the default — opt into "use client" only when needed.
• Fetch data directly in server components.
• Use layouts for persistent, composable UI.

Give it a try on your next project. Once it clicks, you won't go back.