Step 6 — Next.js App Router

In Next.js 16's App Router, a folder is a route. Add app/about/page.tsx and /about exists.

Folder structure

app/
├── layout.tsx         ← wraps every page
├── page.tsx           ← / (home)
├── about/page.tsx     ← /about
└── blog/
    ├── page.tsx       ← /blog (list)
    └── [slug]/page.tsx ← /blog/[slug] (dynamic)

[slug] is a dynamic segment — any value goes there.

Server vs Client components

App Router defaults to Server Components. Fetch data, hit the DB, all inside the component:

async function getMessage() { return { text: "from the server" }; }

export default async function Home() {
  const data = await getMessage(); // runs on server
  return <p>{data.text}</p>;
}

When you need browser-only behavior (state, events), put "use client" at the top:

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

Data flow

Server fetches → passes to children as props → children render. One direction.

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

Try it

Add app/about/page.tsx to your project and visit /about.

Next

Step 7 brings consistent design with Tailwind classes.