Topic
Definition
In the App Router, page.tsx defines route-specific content and layout.tsx defines shared UI that wraps a route segment and its descendants.
In simpler words
A page is the screen for one URL; a layout is the durable frame around related screens.
Choose the file that owns UI so navigation, providers, and page-specific data do not become tangled.
Layouts nest from the root down to the current segment. This makes them appropriate for shared navigation, application providers, and chrome that should survive a sibling navigation.
A page should own the content and data presentation specific to its route. Putting every page concern in a layout makes the shared frame difficult to reason about.
// app/course/layout.tsx (sketch)
export default function CourseLayout({ children }: { children: React.ReactNode }) {
return <>{children}</>;
}
// app/course/[track]/page.tsx
export default function TrackPage() {
return <TrackRoadmap />;
}The navigation belongs to the shared shell; ticket content belongs to its page.
// Wrong — every child route now depends on tickets
export default async function Layout() {
const tickets = await getTickets();
return <TicketList tickets={tickets} />;
}
// Right — fetch/render ticket-specific content in tickets/page.tsxLayouts should not accidentally make sibling routes load unrelated data.
Definition
A layout can provide stable context to its descendants, but a Client Component provider makes its subtree client-capable.
In simpler words
Place providers as low as their consumers allow.
Keep the root layout focused on document structure, global styles, and truly global providers.
Place interactive providers below server-rendered layout content when possible to preserve server boundaries.
Live playground
Move shared navigation between a page and layout, then predict which routes receive it.
page.tsx: Ticket list
Test
At least 10 questions — mix of concept, syntax, practical, and logic. Score ≥ 80% (enforced by the API) to save progress.
Checking your session…
10 questions · concept 3 · syntax 2 · practical 3 · logic 2