Describe unauthorized.js.

Imagine you're building a dashboard page in Next.js 15 and want to show a clean login prompt if the user's session is missing. How would you use unauthorized.js and the unauthorized() function to trigger this state instead of manually redirecting them?

If you have an unauthorized.js file at the root of your App Router, what happens when a nested route calls unauthorized()? How does Next.js decide which UI to render if you also have a nested unauthorized.js in a subfolder?

We recently migrated to Next.js 15 and added an unauthorized.js file to handle expired sessions. However, our QA team noticed that when a user gets unauthorized, the main sidebar layout disappears completely. Why might this be happening, and how would you restructure your route groups or layouts to keep the sidebar visible while showing the unauthorized state?

Suppose you are fetching data in a Server Component. You check the user's token, find it's expired, and call unauthorized(). How does this interact with your global error.js or not-found.js? How do you ensure the user gets the specific 401 UI instead of a generic error page?

When designing the auth flow for a large Next.js application, you have to choose between intercepting unauthorized requests in middleware.ts (redirecting to /login) versus throwing unauthorized() inside Server Components to render unauthorized.js. What are the performance, UX, and caching implications of both approaches?

We have a highly dynamic page with multiple nested, suspended Server Components fetching data in parallel. If one of these deeply nested components triggers unauthorized(), how does Next.js handle the streaming response? How do you prevent a single failed component from tearing down the entire page's UI?

We are planning a migration of a legacy Next.js Pages Router application with custom Express-style auth middleware to Next.js 15 App Router. How would you architect a standardized, type-safe authorization boundary strategy across hundreds of routes using unauthorized.js, ensuring consistent UX and preventing sensitive data leaks during partial rendering?

In a multi-tenant SaaS platform built on Next.js, different tenants require custom login pages and unauthorized states. How would you design a routing and layout architecture that leverages unauthorized.js dynamically across subdomains, while keeping the core auth boundary logic centralized and maintainable?