Questions
9 of 24
Describe not-found.js.
Difficulty: 5/10
App Router Routing, Error Handling, Server Components
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.
Scenario Questions
0-2 years experience
- 1Imagine 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?
- 2We 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
- 1We 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?
- 2You'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
- 1We 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?
- 2We 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
- 1We 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?
- 2In 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?
Follow-up Questions
- 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?