What is an app router?

Imagine 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?

You'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?

We 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?

We 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?

You'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?

We 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?

We 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?

We 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?

You 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?

We 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?

In 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?