Custom 404 Page — Branded Not-Found Experience
Custom 404 Page — Branded Not-Found Experience
Introduced in: v0.1.77
Overview
When a user navigates to a URL that does not exist within the platform, they are now shown a custom, branded 404 page instead of Next.js's default error response.
This page is defined at src/app/not-found.tsx and is automatically rendered by Next.js for any unmatched route within the application.
What the Page Contains
| Element | Description |
|---|---|
| Platform header / logo | Consistent branding so users know they are still within the application |
| 404 — Page Not Found message | Clear, human-readable explanation of what happened |
Link to Homepage (/) | Allows any visitor to return to the root of the site |
Link to Sign-in (/sign-in) | Lets unauthenticated users navigate directly to the login flow |
Link to Dashboard (/dashboard) | Optional recovery path for authenticated users |
How It Works
Next.js automatically picks up any not-found.tsx file placed at src/app/not-found.tsx and uses it as the application-wide 404 handler. No routing configuration is required. The file can also be called programmatically within server components using Next.js's notFound() helper:
import { notFound } from 'next/navigation';
// Inside a server component or page:
if (!resource) {
notFound(); // Renders not-found.tsx automatically
}
Background
Before this change, any unmatched URL returned Next.js's built-in 404 page — a plain, unbranded response with no navigation links. This created a dead end for users who arrived at a broken or mistyped URL, increasing bounce rate and presenting an inconsistent experience. The new custom page ensures users always have a clear path back into the platform.
SEO Impact
- Proper 404 HTTP status codes are still returned; the custom page does not interfere with crawler behaviour.
- Reducing user bounce from 404 errors improves engagement signals used by search engines.
- Consistent branding on error pages supports site credibility.