Create custom 404 error page

[will-lamerton]

Summary

Currently, when users navigate to a non-existent page, they likely see a default error page. This issue requests creating a custom 404 page that provides a better user experience and helps visitors find what they're looking for.

Problem Description

• Default Next.js or browser 404 page is shown
• No helpful navigation options for lost users
• Poor user experience when hitting dead links
• Missed opportunity to retain visitors

Proposed Solution

Create a custom 404 page with:

1. Friendly Message

• Clear "Page Not Found" heading
• Helpful explanation (e.g., "This page doesn't exist or has been moved")

2. Navigation Options

• Link back to homepage
• Links to all project docs
• Quick access to popular pages

3. Search

• Include search functionality so users can find what they need

4. Suggest Related Content

• Show popular or recent docs
• Suggest checking the URL for typos

5. Consistent Design

• Match the site's overall aesthetic
• Include branding elements
• Work with dark mode

Example Layout

┌────────────────────────────────────────┐
│                                        │
│           🔍  404                      │
│                                        │
│     Oops! Page not found               │
│                                        │
│     The page you're looking for        │
│     doesn't exist or has been moved.   │
│                                        │
│  ┌──────────────────────────────────┐  │
│  │       🔍 Search documentation   │  │
│  └──────────────────────────────────┘  │
│                                        │
│  Popular pages:                        │
│  • Nanocoder Getting Started           │
│  • Nanotune Installation               │
│  • API Reference                       │
│                                        │
│  ┌─────────┐  ┌─────────┐             │
│  │  Home   │  │  Docs  │             │
│  └─────────┘  └─────────┘             │
│                                        │
└────────────────────────────────────────┘

Implementation

Basic Implementation

// app/not-found.tsx
import Link from 'next/link';
import { Button } from '@/components/ui/button';

export default function NotFound() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center">
      <h1 className="text-4xl font-bold">404</h1>
      <p className="mt-4 text-lg">Page not found</p>
      <div className="mt-8 flex gap-4">
        <Button asChild>
          <Link href="/">Go Home</Link>
        </Button>
        <Button asChild variant="outline">
          <Link href="/nanocoder/docs/latest">Browse Docs</Link>
        </Button>
      </div>
    </div>
  );
}

Enhanced with Search and Projects

// Include project links and search

Requirements

1. Custom design - Not the default browser/server page
2. Navigation options - Links to home and docs
3. Search functionality - Help users find content
4. Consistent branding - Matches site design
5. Responsive - Works on mobile and desktop
6. Helpful messaging - Clear explanation of what happened

Files Likely Affected

• app/not-found.tsx - New file for custom 404 page
• app/global-error.tsx - Optional: custom error boundary
• Could reuse components: HeroSection, ProjectCardsSection, or ProjectSearch

Success Criteria

• Custom 404 page displays for invalid routes
• Page includes link to homepage
• Page includes links to documentation
• Search functionality available
• Consistent with site design
• Works with dark mode
• Mobile responsive

Additional Ideas

• Track 404 errors to find broken links in documentation
• Suggest similar pages based on URL patterns
• Add "Report broken link" option