#where can I put the not-found.tsx file?

1 messages · Page 1 of 1 (latest)

raw ferryBOT
#

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

#

Yes, you can put the not-found.tsx file in the app directory in Next.js 13. This file is used to render a custom UI when the notFound function is thrown within a route segment. If a user visits a URL that is not handled by your app, they will be shown the UI exported by the app/not-found.js file. Here is an example of how you might use it:

// app/blog/not-found.tsx

import Link from 'next/link'
 
export default function NotFound() {
 return (
 <div>
 <h2>Not Found</h2>
 <p>Could not find requested resource</p>
 <p>
 View <Link href="/blog">all posts</Link>
 </p>
 </div>
 )
}

(Source: Next.js Documentation (https://nextjs.org/docs/app/api-reference/file-conventions/not-found))

In addition to catching expected notFound() errors, the root app/not-found.js file also handles any unmatched URLs for your whole application. This means it has a global scope and is not limited to a specific route or dynamic route.

However, it's important to note that not-found.js components do not accept any props.

As for the version history, the root app/not-found handling global unmatched URLs was introduced in version v13.3.0 and the not-found feature itself was introduced in version v13.0.0.

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

#

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

bitter wigeon
#

@raw ferry can I put the not-found.js file in e.g. (group1) -> products -> [productId] -> notFound.js?

raw ferryBOT
#

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

#

Yes, you can place the not-found.js file in a nested route structure like (group1) -> products -> [productId] -> notFound.js. This will provide a custom "Not Found" UI for that specific route segment and its children.

In the context of Next.js routing, the not-found.js file serves as a Not Found UI for a segment and its children. This means that if a notFound() error is thrown within a route segment, the not-found.js file in that segment will be used to render the Not Found UI.

Here's an example of how you might structure your files:

app/
├── group1/
│   ├── products/
│   │   ├── [productId]/
│   │   │   ├── not-found.js
│   │   │   ├── page.js
│   │   │   └── ...
│   │   └── ...
│   └── ...
└── ...

In this structure, if a notFound() error is thrown within the [productId] segment, the not-found.js file within that segment will be used to render the Not Found UI.

(Source: Next.js Documentation (https://nextjs.org/docs/app/building-your-application/routing))

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

#

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

old forge
#

@raw ferry my not-found.tsx file located in the root app folder catches not-found errors properly. But it reloads in an infinite loop. How can I solve this?

raw ferryBOT
#

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

#

Hmm, I don't know enough to give you a confident answer yet. The provided extracts do not contain specific information about troubleshooting an infinite loop issue with the not-found.tsx file in Next.js.

However, infinite loops are often caused by a component re-rendering continuously due to state changes or side effects in React. You might want to check your not-found.tsx file for any such issues.

For more detailed help, I recommend checking the Next.js Documentation (https://nextjs.org/docs) or their GitHub Discussions (https://github.com/vercel/next.js/discussions) for similar issues or further assistance.

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