What is an app router?

0-2 years experience

1. 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?
2. 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. 3We need to build a product detail page where the URL looks like `/products/[id]`. How do you set up the folder structure for this, and how do you actually access that dynamic `id` parameter inside your page component?

2-5 years experience

1. 1We have a product list page in the App Router. We want the list to update at most every 10 minutes, but we also need a 'Refresh' button that forces an immediate update. How would you implement the data fetching and revalidation strategy for this?
2. 2You're migrating a component that uses `localStorage` to display a user's theme preference. When loading the page in the App Router, you notice a flash of unstyled content followed by a hydration mismatch error. Why is this happening, and how would you resolve it using Suspense or client-side checks?
3. 3We want to ensure that if a specific nested route (like `/dashboard/analytics`) fails to fetch data, it doesn't crash the entire dashboard layout, but instead shows a localized error message with a retry button. How do you set this up using the App Router's file conventions?

5-8 years experience

1. 1We want to implement a modal login flow. When a user clicks 'Login' from the feed, the login form should open in a modal, and the URL should update to `/login` without a full page reload. However, if they refresh the page or share that `/login` link, it should render as a full, standalone page. How would you design this using the App Router?
2. 2We have a slow legacy API that takes 3 seconds to return user profile data, but the rest of our dashboard page is static and fast. How would you architect this page in the App Router to ensure the user gets an instant initial paint, and how does streaming work under the hood here?
3. 3You are building a real-time comment section using Server Actions. To make the UI feel instantaneous, we want to show the user's comment immediately before the server confirms it was saved. How would you implement this optimistic update, and how do you handle the rollback if the Server Action fails?

8+ years experience

1. 1We have a massive, high-traffic legacy Next.js application running on the Pages Router with custom Express servers and complex `_document.js` overrides. We want to move to the App Router to leverage RSCs. How would you design an incremental migration strategy that minimizes risk, handles shared state, and avoids a 'big bang' rewrite?
2. 2In the Pages Router, we relied heavily on Redux/Zustand wrapping the entire `_app.js` to share global state. With the App Router's server-first architecture, wrapping everything in a client-side provider defeats many benefits of RSCs. How do you architect state management across server and client boundaries in a large-scale App Router application?