Tendril
Loading lesson…
The App Router uses React Server Components by default. Learn the folder conventions and the server/client split.
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.
// 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> ); }The root layout renders once per app session. Use it for fonts, providers, and html/body.// 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> ); }Next 15+ makes params async. Await it before use. revalidate: 60 caches the fetch for a minute.The big idea: folders are routes, the server is the default, and params are async. Let Next do the heavy lifting on the server.
6 questions · take it digitally for instant feedback at tendril.neural-forge.io/learn/quiz/end-progx-nextjs-app-router-creators
What is the main idea of "Next.js App Router With AI"?
Which concept is most central to "Next.js App Router With AI"?
What should a careful learner remember about "Server Components are the default"?
You want to use AI after this lesson. What is the safest next step?
How should AI output about app router be treated?
Name one way to verify an AI answer about app router.