Next.js App Router With AI

The App Router uses React Server Components by default. Learn the folder conventions and the server/client split.

CreatorsAI-Assisted Coding~33 min readAdvancedCoderBI2 · Representation & ReasoningBI4 · Natural InteractionPrint / PDF

Lesson map

What this lesson covers

55 min10 blocks4 concepts

Learning path

The main moves in order

1Folders Are Routes
2app router
3layout
4page

Concept cluster

Terms to connect while reading

app routerlayoutpageserver component

Sections1

Notes4

Code2

Terms1

Section 1

Folders Are Routes

In Next.js 16, every folder under `app/` is a URL segment. `app/dashboard/page.tsx` serves `/dashboard`. `layout.tsx` wraps children. `loading.tsx` shows fallbacks. That is the whole router.

The root layout renders once per app session. Use it for fonts, providers, and html/body.

tsx

// app/layout.tsx
import "./globals.css";

export const metadata = { title: "Tendril" };

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Next 15+ makes params async. Await it before use. revalidate: 60 caches the fetch for a minute.

tsx

// app/posts/[slug]/page.tsx
import { notFound } from "next/navigation";

async function getPost(slug: string) {
  const res = await fetch(`https://api.example.com/posts/${slug}`, {
    next: { revalidate: 60 },
  });
  if (res.status === 404) return null;
  if (!res.ok) throw new Error("failed to load post");
  return res.json() as Promise<{ title: string; body: string }>;
}

export default async function PostPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = await getPost(slug);
  if (!post) notFound();

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </article>
  );
}

Check-in 1. Got it so far?

Key terms in this lesson

Check-in 2. Got it so far?

The big idea: folders are routes, the server is the default, and params are async. Let Next do the heavy lifting on the server.

End-of-lesson quiz

Check what stuck

15 questions · Score saves to your progress.

Tutor

Curious about “Next.js App Router With AI”?

Ask anything about this lesson. I’ll answer using just what you’re reading — short, friendly, grounded.

Progress saved locally in this browser. Sign in to sync across devices.

Related lessons

Next.js App Router With AI

Folders Are Routes

Curious about “Next.js App Router With AI”?

Keep going

Next.js App Router With AI

Folders Are Routes

Curious about “Next.js App Router With AI”?

Keep going