Describe not-found.js.

The not-found file is used to render UI when the notFound function is thrown within a route segment.

1
not-found.js components do not accept any props.
2
By default, not-found is a Server Component. You can mark it as async to fetch and display data
3
Invoking the notFound() function throws a NEXT_NOT_FOUND error and terminates rendering of the route segment in which it was thrown.
4
If you need to use Client Component hooks like usePathname to display content based on the path, you must fetch data on the client-side instead.

Difficulty: 5/10

Topics: App Router Routing, Error Handling, Server Components

0-2 years experience

1
Imagine we have a product detail page at /products/[id]. If a user inputs an ID that doesn't exist in our database, how would you trigger our custom 404 UI from inside that Server Component?
2
We have a custom not-found.js file in our root app/ directory, but we want a completely different, simplified 404 page specifically for our /dashboard routes. How would you set up the file structure to achieve this?

2-5 years experience

1
We noticed that when a 404 error occurs inside /dashboard/settings, the custom 404 page is rendering inside our complex dashboard sidebar layout. The design team wants the 404 page to be full-screen without the sidebar. How would you refactor the layouts and not-found.js files to fix this?
2
You're calling notFound() inside a Server Component after a failed fetch. However, you notice the page is crashing with a runtime error instead of showing the not-found.js UI. What are the common reasons this might happen, and how would you debug it?

5-8 years experience

1
We are building a multi-tenant application where each tenant has its own branding. When a sub-page is not found, we need the not-found.js page to dynamically fetch and display that specific tenant's theme and logo. How would you architect this, keeping in mind that not-found.js doesn't receive route parameters directly?
2
We have a static site with thousands of pre-rendered product pages. When a user requests a non-existent product, we want to return a 404. How does Next.js handle the caching and CDN edge-caching of these dynamically triggered 404 responses, and how would you optimize this to prevent server overload?

8+ years experience

1
We are migrating a massive legacy Next.js Pages Router application to the App Router. In the old system, we had a highly customized pages/404.js that integrated with our global middleware for geo-routing and third-party analytics tracking. How would you design the migration path for this 404 behavior to the App Router, ensuring we don't lose analytics accuracy or break localized routing?
2
In a large monorepo with multiple federated teams contributing to different route groups, we need to enforce a consistent global error and 404 handling strategy. How would you design a reusable routing/error boundary architecture using not-found.js and error.js that teams can easily adopt without duplicating boilerplate or breaking global telemetry?

❓How does not-found.js interact with layouts, and how would you bypass a parent layout for a 404 page?
❓What happens to the HTTP status code when notFound() is triggered during a client-side transition versus static generation?
❓How do you handle localized 404 pages inside an [lang] dynamic route group?