List important files in app routing system.

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

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

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

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

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

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

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

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

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