Next.js 14 App Router: Complete Guide

Next.js 14 brings significant improvements to the App Router, making it the recommended way to build React applications.

By default, all components in the app directory are React Server Components. This means they render on the server and send HTML to the client.

// This is a Server Component by default
export default async function Page() {
  const data = await fetchData();
  return <div>{data.title}</div>;
}

When you need interactivity, add the "use client" directive:

"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return  setCount(c => c + 1)}>{count};
}

The App Router simplifies data fetching with async components and the extended fetch API with built-in caching.

The App Router represents the future of React development, combining the best of server and client rendering.