not-found.js
The not-found file is used to render UI when the notFound
function is thrown within a route segment. Along with serving a custom UI, Next.js will also return a 404
HTTP status code.
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>
);
}
Note: In addition to catching expected
notFound()
errors, the rootapp/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 theapp/not-found.js
file.
Props
not-found.js
components do not accept any props.