mirror of
https://github.com/hanzoai/zod.git
synced 2026-09-24 17:04:49 +00:00
* fix(docs): add custom 404 page with proper theme support The default Next.js error page renders with a hardcoded black background and dark color scheme, causing broken styling in light mode (black background, invisible banner text) and the 404 message not being centered. Add a custom not-found.tsx that uses Fumadocs DocsPage component to properly inherit the active theme, centers the 404 message, and sets a concise tab title. Fixes #5778 * fix(docs): move not-found to root and override h1 padding Place not-found.tsx at the app root so it catches unmatched URLs across all route groups (e.g. /blog/*, /api/*) — a not-found inside the (doc) group only catches 404s within that segment. Add `py-0!` to the heading to defeat the global `h1 { @apply py-3 }` rule from global.css; `border-none` already neutralizes the bottom border. Wrap in DocsLayout so the 404 keeps the sidebar/nav chrome. --------- Co-authored-by: Colin McDonnell <[email protected]>
19 lines
669 B
TypeScript
19 lines
669 B
TypeScript
import { layoutProps } from "@/app/(doc)/layout";
|
|
import { DocsLayout } from "fumadocs-ui/layouts/docs";
|
|
import { DocsPage } from "fumadocs-ui/page";
|
|
|
|
export const metadata = { title: "Page not found | Zod" };
|
|
|
|
export default function NotFound() {
|
|
return (
|
|
<DocsLayout {...layoutProps} containerProps={{}}>
|
|
<DocsPage>
|
|
<div className="flex flex-col items-center justify-center min-h-[60vh] text-center">
|
|
<h1 className="text-6xl font-bold text-fd-foreground border-none py-0!">404</h1>
|
|
<p className="mt-4 text-lg text-fd-muted-foreground">This page could not be found.</p>
|
|
</div>
|
|
</DocsPage>
|
|
</DocsLayout>
|
|
);
|
|
}
|