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.