Skip to main content
Next.js App Router renders src/app/not-found.tsx when a path doesn’t match any route.
  • Location: sabo/src/app/not-found.tsx
  • Defaults: Header, Footer, Particles background, and a CTA button back to /

​
Customize Content

1

Edit text and button

Update the heading, description, and button label/URL.
sabo/src/app/not-found.tsx
<h2 className="text-4xl sm:text-5xl lg:text-6xl font-semibold text-foreground mb-6 sm:mb-8">
  Page not found
</h2>
<p className="text-base sm:text-lg lg:text-lg mb-8 sm:mb-12 max-w-xs sm:max-w-md mx-auto">
  The page you are looking for doesn’t exist or is currently unavailable.
</p>
<Button asChild variant="secondary" size="lg">
  <Link href="/" className="flex items-center gap-2 group">
    <ArrowLeft className="w-4 h-4 transition-transform duration-300 group-hover:-translate-x-1" />
    Go back to homepage
  </Link>
</Button>
2

Adjust background effect

Tweak the Particles props like quantity or connect color to theme.
sabo/src/app/not-found.tsx
<Particles
  className="absolute inset-0 z-0"
  quantity={200}
  refresh
  color={color}
/>
Theme-based color is derived from next-themes:
sabo/src/app/not-found.tsx
const { resolvedTheme } = useTheme();
const color = useMemo(
  () => (resolvedTheme === "dark" ? "#ffffff" : "#000000"),
  [resolvedTheme]
);
3

Show or hide Header/Footer

Show the full site chrome or remove parts for a minimal 404.
sabo/src/app/not-found.tsx
return (
  <div className="flex flex-col">
    <Header />
    {/* ... page body ... */}
    <Footer />
  </div>
);
  • Hide header: remove <Header />
  • Hide footer: remove <Footer />
For navigation/footer customization, see the Header and Footer guides.