What is an app router?

Q: What is an app router?

shared layouts nested routing loading states error handling The App Router works in a new directory named app. By default components inside the app folder are React Server components The App Router takes priority over the Pages Router.

Difficulty: 6/10

React Server Components, File-system Routing, Data Fetching & Caching

In version 13, Next.js introduced a new App Router built on React Server Components, which supports

1
shared layouts
2
nested routing
3
loading states
4
error handling

1
The App Router works in a new directory named app.
2
By default components inside the app folder are React Server components
3
The App Router takes priority over the Pages Router.

Scenario Questions

0-2 years experience

1Imagine you're building a dashboard with a sidebar that should stay visible and not re-render when navigating between different tabs. How would you structure your folders and files in the App Router to achieve this?
2You've just created a new page in the App Router and you want to add a simple click handler to a button, but you get an error saying 'useState is not a function' or similar. What's happening here, and how do you fix it?
3

Follow-up Questions