How do you create a custom 404 not found page in Next.js?

You add a file named not-found.js to your app folder, and Next.js automatically shows it whenever a route does not match any page, or whenever you manually call the notFound function inside a page to indicate that specific content could not be found.

// app/not-found.js
export default function NotFound() {
  return (
    <div>
      <h2>Page Not Found</h2>
      <p>The page you are looking for does not exist.</p>
    </div>
  );
}