Skip to content

    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 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.

    Was this helpful?