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.
15 questions · take it digitally for instant feedback at tendril.neural-forge.io/learn/quiz/end-progx-nextjs-app-router-creators
In Next.js 16 with the App Router, what determines the URL path for a page?
What is the purpose of a layout.tsx file in the App Router?
When a component in the App Router does NOT include the 'use client' directive, where does it render by default?
Why should you avoid using useEffect to fetch data in a Next.js App Router page?
When is the 'use client' directive required in a component?
What file provides a loading fallback while data is being fetched for a route?
What happens to the JavaScript bundle when a component renders as a Server Component?
What does the notFound() function do in the App Router?
What does the revalidate option control in the App Router?
In the App Router, how are dynamic route parameters accessed in a page component?
Which statement about Server Components is false?
What is a key advantage of server-side data fetching over client-side fetching in Next.js?
What does the term 'waterfall' refer to in the context of data fetching?
Which file would you create to show a custom UI when a product doesn't exist in an e-commerce app?
What is the primary difference between the App Router and the older Pages Router in Next.js?