Step 6
Step 6 — Next.js App Router
30 min
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.