App Router BasicsBeginner
1Question 1 of 1
typescriptHow does the Next.js App Router structure pages, layouts, and routing?
Explanation & Concept
The Next.js App Router uses a folder-based routing hierarchy inside the `app` directory:
• `page.tsx`: Defines the unique UI for a route segment. • `layout.tsx`: Shared UI that wraps child pages and preserves state across navigations. • `loading.tsx`: Automatically wraps routes in a React Suspense boundary. • `error.tsx`: Wraps route segments in an Error Boundary. • Route Groups `(group)`: Organize routes without altering URL paths.
Code Example
typescript
// app/dashboard/layout.tsx
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
return (
<div className="flex min-h-screen">
<aside className="w-64 border-r p-4">Dashboard Nav</aside>
<main className="flex-1 p-6">{children}</main>
</div>
);
}
// app/dashboard/page.tsx
export default function DashboardPage() {
return <h1>Welcome to your Dashboard</h1>;
}How It Works & Key Takeaways
Navigating between child pages inside `/dashboard` preserves the sidebar layout state without re-rendering or re-fetching sidebar data.
Mock Test · 1 Questions · Optional
Ready for Server Components?
Take a quick test to evaluate yourself, or move straight to the next module.
Beginner1 questions