Getting Started with Next.js 14

Next.js 14 brings a more refined App Router, faster builds, and first-class Server Components. This guide walks through the pieces you actually use day to day.

Server Components by default

In the App Router, components render on the server unless you opt into the client with "use client". Data fetching happens right inside the component:

async function Posts() {
  const res = await fetch("https://api.example.com/posts", {
    next: { revalidate: 60 },
  });
  const posts = await res.json();
  return <ul>{posts.map((p) => <li key={p.id}>{p.title}</li>)}</ul>;
}

When to reach for a client component

Use "use client" when you need state, effects, or browser APIs:

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

Takeaway

Keep components on the server, push the client boundary as deep as possible, and let the framework handle caching. That mental model carries most of Next.js 14.