404 page not working in nextjs 14

If you are exporting statically, there are some limitations with app/not-found.tsx because it only works for server-rendered or dynamic pages.

Instead, you need to create a dedicated app/404.tsx file for static exports.

Example:

// app/404.tsx
export default function NotFound() {
  return (
    <div className="min-h-screen flex flex-col items-center justify-center">
      <h1 className="text-4xl font-bold">404 - Page Not Found</h1>
      <p>The page you are looking for does not exist.</p>
      <a href="/" className="mt-4 text-blue-600 hover:underline">
        Go back home
      </a>
    </div>
  );
}

This will generated a 404.html file is after the build process in the out/ folder.

Leave a Comment

Scroll to Top