Topic 3 of 39
App Router
Overview
Introduced in Next.js 13, the App Router is the modern standard for Next.js applications. It leverages React Server Components, nested routing, layouts, and streaming. It replaces the older Pages router, offering better performance and developer experience.
Syntax
tsx
// app/dashboard/page.tsx -> /dashboard
export default function Dashboard() {
return <h1>Dashboard</h1>;
}
// app/dashboard/layout.tsx -> Wraps dashboard pages
export default function DashboardLayout({ children }) {
return (
<section>
<nav>Sidebar</nav>
{children}
</section>
);
}Common Pitfalls
- Trying to use
getServerSidePropsorgetStaticPropsin the App Router (they are deprecated; use native fetch instead). - Not understanding that
layout.tsxdoes not re-render on navigation, whiletemplate.tsxdoes.
Interview Questions
Q:
What are the main advantages of the App Router over the Pages Router?
A:
App Router supports React Server Components by default, allows nested layouts that don't re-render, provides streaming with Suspense, and simplifies data fetching using standard async/await.
Real-World Example
A nested layout system using the App Router.
example
tsx
// app/layout.tsx (Root Layout - always present)
export default function RootLayout({ children }) {
return <html><body>{children}</body></html>;
}
// app/shop/layout.tsx (Shop Layout - nested)
export default function ShopLayout({ children }) {
return (
<div>
<ShopHeader />
<main>{children}</main>
</div>
);
}Check Your Knowledge
Test your understanding of App Router with these quick questions.