List important files in app routing system.

0-2 years experience

1. 1Imagine you're building a new dashboard page under `/dashboard`. You need a shared sidebar that doesn't re-render when navigating between tabs, and a specific view for the profile tab. Which files would you create in your `/app/dashboard` directory, and how do they work together?
2. 2We have a page that fetches data from a slow external API. Users are seeing a blank screen while it loads. How would you use Next.js file-system conventions to show an instant loading skeleton without writing manual state variables?
3. 3If a component inside your `page.js` throws a runtime error, the whole app currently crashes. What file can you drop into that folder to gracefully catch that error, and what does that file need to export?

2-5 years experience

1. 1We have a multi-step signup wizard where we want to track form state in React state as the user moves between `/signup/step-1` and `/signup/step-2`. However, every time they navigate, the state resets. We are currently using `layout.js`. Why is this happening, and how would you fix it using Next.js file conventions?
2. 2You are building an API endpoint to handle webhooks at `/api/payment`. You accidentally created both a `page.js` and a `route.js` in the same folder, and now Next.js is throwing a build error. Why does this conflict happen, and how should you structure your files to serve both a UI page and an API endpoint at the same path?

5-8 years experience

1. 1We are building a complex social media feed. We want to implement a modal view when a user clicks a post (so the URL updates to `/post/:id` but the feed remains visible in the background), but if they refresh the page directly, it should render as a full-page post. How would you structure your file system using parallel and intercepting routes to achieve this?
2. 2We noticed that runtime errors occurring in our root `layout.js` are bypassing our standard `error.js` file and showing a generic browser crash screen. Why is this happening, how does Next.js handle root-level errors, and how would you resolve this using `global-error.js`?

8+ years experience

1. 1We are migrating a massive enterprise application with hundreds of routes from the Next.js Pages Router to the App Router. We cannot do a big-bang release. How would you design the migration strategy allowing both routers to coexist, and what architectural challenges do you foresee regarding shared layouts, global state, and middleware?
2. 2In a large monorepo with multiple teams contributing to a single Next.js application, we are seeing build times skyrocket and bundle sizes balloon due to deeply nested layouts and duplicate route handlers. How would you establish file-system routing guidelines, boundaries, and linting rules to keep the routing architecture maintainable and performant?