App Router
- React course
- Advanced
- Lesson 2/56
- 4 min
Learn the new App Router structure and file-based routes.
App Router
The App Router is Next.js's recommended routing system since Next.js 13. It works in the app/ directory; each folder is a path segment, each page.js a page.
The old pages/ directory is still supported but new projects should start with App Router. They do not mix; App Router takes priority.
App Router makes Server Components the default; this improves performance.
Nested routes
In the App Router the folder structure nests routes. app/blog/[id]/page.js gives a dynamic route; [id] is a URL parameter.
You can place a layout.js in each folder; this layout wraps all pages below it. The parent layout wraps the child layout, so frames nest.
This makes it easy to manage shared UI (top nav, footer) across pages.
Practice Write root layout
Write a RootLayout component: destructure { children }, return <html><body>{children}</body></html>. export default RootLayout.
Starter code
// app/layout.js
// RootLayout bileşenini buraya yazSample solution
// app/layout.js
export default function RootLayout({ children }) {
return (
<html>
<body>{children}</body>
</html>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Where is layout defined?
- app/route.js
- app/layout.js Correct answer
- app/style.css
- app/config.json
Explanation: app/layout.js defines the layout.
2 Layout file
// app/____.js
export default function RootLayout({ children }) {
return <html><body>{children}</body></html>;
}// app/layout.js
export default function RootLayout({ children }) {
return <html><body>{children}</body></html>;
}Explanation: app/layout.js is the root layout.
3 App Router: match the terms
| Term | Meaning |
|---|---|
page.js |
Page content |
layout.js |
Frame |
[id] |
Dynamic parameter |
app/ |
Route root |