404 Not Found

Framework Next.js 13 Error Handling 404 Not Found

Categories:

Tags:

Create custom 404 page

Create the `not-found.js` file

You can create the custom not found file on the app/not-found.js first

// app/not-found.js
export default function NotFound() {
  return (
    <>
      <h2>Custom Not Found</h2>
      <p>Could not find requested resource</p>
    </>
  );
}

Test to see the custom 404 page

You can import the notFound function from the next/navigation and then call it anywhere that you need. And you can see your custom 404 page

// app/page.js
import { notFound } from 'next/navigation';

export default async function HomeIndex() {
  notFound();
  return (
    <h1>Home</h1>
  )
}

Reference