Tendril

Lesson 170 of 1596

Next.js App Router With AI

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

Creators · AI-Assisted Coding · ~33 min read

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> ); }

Key terms in this lesson

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

6 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