#notFound() function.

1 messages · Page 1 of 1 (latest)

hazy swallow
#

I'm running dev environment and all i get is the popup with Error: NEXT_NOT_FOUND inside of it

tidal socketBOT
#

Hi @hazy swallow. 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 used to render a Not Found UI when a route does not match with an existing route in your project. When invoked, it throws a NEXT_NOT_FOUND error and terminates rendering of the route segment in which it was thrown. Here's an example of how it can be used:

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()
 }
 
 // ...
}

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

If you're seeing a NEXT_NOT_FOUND error, it means that the notFound() function was invoked. This could be because the route you're trying to access does not exist, or because the notFound() function was called in your code.

If you're seeing this error in a development environment, it could be because the page you're trying to access does not exist, or because there's an issue with how you're using the notFound() function. Make sure that the route you're trying to access exists and that you're using the notFound() function correctly.

If you're still having issues, it might be helpful to look at the stack trace provided with the NEXT_NOT_FOUND error to see where the notFound() function is being called. This could help you identify where the issue is coming from.

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

#

@hazy swallow kapa.ai is still learning and improving, please let us know how it did by reacting below

hazy swallow
#

@tidal socket but why doesn't it redirect to the not-found.tsx file

tidal socketBOT
#

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

#

The notFound() function in Next.js is designed to render a Not Found page when a route does not match with an existing route in your project. However, it doesn't automatically redirect to a not-found.tsx file. Instead, it throws a NEXT_NOT_FOUND error and terminates rendering of the route segment in which it was thrown.

If you want to render a custom Not Found page, you should create a not-found.tsx file in the app directory of your project. This file will be used as the global Not Found page for your application. Here's an example of how you can do this:

import { notFound } from 'next/navigation';

export default function NotFound() {
  notFound();
}

(Source: Github Issue 49281 (https://github.com/vercel/next.js/issues/49281))

In this example, whenever a route does not match with an existing route in your project, it will call the NotFound function, which then calls the notFound() function. This will render the not-found.tsx page.

If you're still having issues, it might be helpful to check the following:

  • Make sure that the not-found.tsx file is located in the app directory of your project.
  • Make sure that you're calling the notFound() function in the not-found.tsx file.
  • If you're using internationalization, make sure that the not-found.tsx file is correctly set up for internationalization. (Source: Github Issue 54911 (https://github.com/vercel/next.js/issues/54911))

If you're still having issues after checking these things, it might be a good idea to open an issue on the Next.js GitHub repository to get help from the community.

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

#

@hazy swallow kapa.ai is still learning and improving, please let us know how it did by reacting below

hazy swallow
#

@tidal socket i want to know why it doesnt redirect even though the page is there

tidal socketBOT
#

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

#

The notFound() function from next/navigation is designed to render a Not Found page when a route does not match with an existing route in your project. However, it doesn't automatically redirect to a not-found.tsx file. Instead, it throws a NEXT_NOT_FOUND error and terminates rendering of the route segment in which it was thrown.

If you have a not-found.tsx file in your app directory and it's not being rendered when you expect it to, there could be a few reasons for this:

  1. The notFound() function is not being called correctly: Make sure that you're calling the notFound() function in your not-found.tsx file. Here's an example of how you can do this:
import { notFound } from 'next/navigation';

export default function NotFound() {
  notFound();
}

(Source: Github Issue 49281 (https://github.com/vercel/next.js/issues/49281))

  1. The not-found.tsx file is not in the correct location: The not-found.tsx file should be located in the app directory of your project. If it's in a different location, it might not be used as the global Not Found page for your application.

  2. There's an issue with your project's configuration: If you're using features like internationalization or dynamic routes, there could be an issue with how these features are configured in your project. For example, if you're using internationalization, you might need to set up the not-found.tsx file to work with different languages. (Source: Github Issue 54911 (https://github.com/vercel/next.js/issues/54911))

If you're still having issues after checking these things, it might be a good idea to open an issue on the Next.js GitHub repository to get help from the community.

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