#Cannot use custom not-found.js file

1 messages · Page 1 of 1 (latest)

coarse pebble
#

Hi, I cannot use a custom not-found.js file I made if I am calling the notFound() function in a route layout.js file. Instead of going to my custom 404 page, it goes to the root page/next default page. Why is this, and can I fix it?

vestal sleetBOT
#

Hi @coarse pebble. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

The notFound() function in Next.js is designed to render the not-found.js file within the route segment where it is called. If you have a custom not-found.js file, it should be rendered when the notFound() function is invoked. However, there are a few things you need to check:

  1. Make sure your custom not-found.js file is correctly placed in the app directory, not the pages directory. As per the App Router Incremental Adoption Guide (https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration), pages/404.js has been replaced with the app/not-found.js file.

  2. Ensure that your not-found.js file does not accept any props. As per the not-found.js documentation (https://nextjs.org/docs/app/api-reference/file-conventions/not-found), not-found.js components do not accept any props.

  3. Check if you are correctly invoking the notFound() function. As per the notFound documentation (https://nextjs.org/docs/app/api-reference/functions/not-found), invoking the notFound() function throws a NEXT_NOT_FOUND error and terminates rendering of the route segment in which it was thrown.

Here's an example of how to use the notFound() function:

import { notFound } from 'next/navigation'
 
async function fetchUsers(id) {
 const res = await fetch('<https://...'>)
 if (!res.ok) return undefined
 return res.json()
}
 
export default async function Profile({ params }) {
 const user = await fetchUser(params.id)
 
 if (!user) {
 notFound()
 }
 
 // ...
}
#

If you've checked all of these and the issue persists, it might be a bug or a configuration issue that's not covered in the provided extracts. In that case, I would recommend checking the official Next.js documentation or reaching out to the Next.js community for further assistance.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@coarse pebble kapa.ai is still learning and improving, please let us how it did by reacting below

coarse pebble
#

@vestal sleet But it only doesn't go to my custom 404 page right now if I call the notFound() function in a layout.js file. It goes to my custom one if I run that function however in a normal RSC.

vestal sleetBOT
#

Let me check the knowledge base for you. One moment! :books:

#

The notFound() function in Next.js is designed to terminate the rendering of the route segment in which it is invoked and render the not-found.js file. If you're calling notFound() within a layout.js file and it's not rendering your custom not-found.js, it might be due to how layouts work in Next.js.

Layouts in Next.js are used to define shared UI for a route segment and its children. When you call notFound() in a layout.js file, it might be terminating the rendering of the layout itself, but not necessarily triggering the not-found.js file for the specific route segment.

Here's how you might typically use a layout:

// app/user/layout.js
export default function Layout({ children }) {
  // Shared UI
  return <div>{children}</div>;
}

And here's how you might use notFound() in a route segment:

// app/user/[id]/page.js
import { notFound } from 'next/navigation'
 
async function fetchUser(id) {
 const res = await fetch('<https://...'>)
 if (!res.ok) return undefined
 return res.json()
}
 
export default async function Profile({ params }) {
 const user = await fetchUser(params.id)
 
 if (!user) {
 notFound()
 }
 
 // ...
}

If you want to handle a not found case within a layout, you might need to do so within the specific route segments (page.js files) that use the layout, rather than in the layout file itself.

If you've checked all of these and the issue persists, it might be a bug or a configuration issue that's not covered in the provided extracts. In that case, I would recommend checking the official Next.js documentation or reaching out to the Next.js community for further assistance.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@coarse pebble kapa.ai is still learning and improving, please let us how it did by reacting below

coarse pebble
#

@vestal sleet Would it be beneficial to use a template.tsx file instead of a layout.tsx file for this purpose (of grabbing user data before the page has loaded, making sure it's not null - and if it is throwing notFound())?

vestal sleetBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Yes, using a template.tsx file could be beneficial in this case. Templates in Next.js are similar to layouts, but they create a new instance for each of their children on navigation. This means that when a user navigates between routes that share a template, a new instance of the component is mounted, DOM elements are recreated, state is not preserved, and effects are re-synchronized.

This behavior can be useful for features that rely on useEffect (e.g., logging page views) and useState (e.g., a per-page feedback form). In your case, you could use a template to fetch user data and check if it's null before the page has loaded. If the data is null, you could then throw notFound().

Here's an example of how you might define a template:

// app/template.tsx
export default function Template({ children }: { children: React.ReactNode }) {
 return <div>{children}</div>
}

Remember, templates create a new instance for each navigation, so they don't maintain state like layouts do. If you need to maintain state across routes, you might still need to use a layout.

As always, the best approach depends on the specific requirements of your application. If you're unsure, I recommend experimenting with both layouts and templates to see which one works best for your needs.

For more information, you can refer to the Next.js documentation on pages and layouts (https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@coarse pebble kapa.ai is still learning and improving, please let us how it did by reacting below

coarse pebble
#

@vestal sleet Even that doesn't go to my custom not-found page raised_eyebrow

vestal sleetBOT
#

Let me check the knowledge base for you. One moment! :books:

#

I'm sorry to hear that you're still having trouble. Based on the provided extracts, it's difficult to pinpoint the exact issue. However, here are a few more things you could check:

  1. Make sure your custom not-found.js file is correctly placed in the app directory, not the pages directory.

  2. Ensure that your not-found.js file does not accept any props.

  3. Check if you are correctly invoking the notFound() function.

  4. Make sure your notFound() function is being called correctly within your template.tsx or layout.tsx file.

If you've checked all of these and the issue persists, it might be a bug or a configuration issue that's not covered in the provided extracts. In that case, I would recommend checking the official Next.js documentation or reaching out to the Next.js community for further assistance.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@coarse pebble kapa.ai is still learning and improving, please let us how it did by reacting below

coarse pebble
#

@vestal sleet I can't even use my custom not-found.tsx page by calling notFound in a template file... what's going on?

vestal sleetBOT
#

Let me check the knowledge base for you. One moment! :books:

#

I'm sorry to hear that you're still having trouble. Based on the provided extracts, it's difficult to pinpoint the exact issue. However, here are a few more things you could check:

  1. Make sure your custom not-found.js file is correctly placed in the app directory, not the pages directory.

  2. Ensure that your not-found.js file does not accept any props.

  3. Check if you are correctly invoking the notFound() function.

  4. Make sure your notFound() function is being called correctly within your template.tsx or layout.tsx file.

If you've checked all of these and the issue persists, it might be a bug or a configuration issue that's not covered in the provided extracts. In that case, I would recommend checking the official Next.js documentation or reaching out to the Next.js community for further assistance.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: