51 lines
1.5 KiB
Text
51 lines
1.5 KiB
Text
---
|
|
title: not-found.js
|
|
description: API reference for the not-found.js file.
|
|
---
|
|
|
|
The **not-found** file is used to render UI when the [`notFound`](/docs/app/api-reference/functions/not-found) function is thrown within a route segment. Along with serving a custom UI, Next.js will also return a `404` HTTP status code.
|
|
|
|
```tsx filename="app/blog/not-found.tsx" switcher
|
|
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>
|
|
)
|
|
}
|
|
```
|
|
|
|
```jsx filename="app/blog/not-found.js" switcher
|
|
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>
|
|
)
|
|
}
|
|
```
|
|
|
|
> **Good to know**: 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 users that visit a URL that is not handled by your app will be shown the UI exported by the `app/not-found.js` file.
|
|
|
|
## Props
|
|
|
|
`not-found.js` components do not accept any props.
|
|
|
|
## Version History
|
|
|
|
| Version | Changes |
|
|
| --------- | --------------------------------------------------- |
|
|
| `v13.3.0` | Root `app/not-found` handles global unmatched URLs. |
|
|
| `v13.0.0` | `not-found` introduced. |
|