Not-found page does not work in next.js 13 - next.js

Question

This is the sturcure of my next.js project.
And my 404.js page is :
'use client';
export default function NotFound() {
return (
<div>
<h2>Not Found</h2>
</div>
);
}
when I enter the wrong route it does not work and does not go to my custom page and goes to next.js 404 page.
why, Where am I wrong?
thanks in advance.

Answer 1

NextJS13 doesnt do error handling in this format, you dont want to use a file named 404.js but instead a file named error.js.
This will catch any errors sent from an API request returning a 404 response.
Docs here: https://beta.nextjs.org/docs/routing/error-handling
If your API instead returns a 200 response but an empty body, you could create another component named not-found.js, import that into the file you want it to show on, and return it on if the api is empty, for example:
app/dashboard/not-found.js
export default function NotFound() {
return (
<>
<h2>Not Found</h2>
<p>Could not find requested resource</p>
</>
);
}
app/dashboard/index.js:
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();
}
// ...
}
Docs here: https://beta.nextjs.org/docs/api-reference/notfound

Answer 2

To create a not-found page in Next.js using the app folder, you can follow these steps:
Create a new folder named pages in your project's root directory.
In the pages folder, create a new file named 404.js.
In the 404.js file, add the following code to render the Not Found page:
const NotFound = () => {
return (
<div>
<h1>404 - Not Found</h1>
</div>
)
}
export default NotFound
In your _app.js file, add a catch-all route to display the Not Found page for any unknown routes:
import App, { Container } from 'next/app'
class MyApp extends App {
static async getInitialProps({ Component, ctx }) {
let pageProps = {}
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx)
}
return { pageProps }
}
render() {
const { Component, pageProps } = this.props
return (
<Container>
<Component {...pageProps} />
</Container>
)
}
}
export default MyApp
Now, when a user visits a route that does not exist in your application, the Not Found page will be displayed.