404 Not Found Error

Create a user-friendly 404 page that helps visitors find what they need.

// Next.js custom 404 page
// app/not-found.tsx
export default function NotFound() {
  return (
    <div>
      <h1>404 — Page Not Found</h1>
      <p>The page you're looking for doesn't exist.</p>
      <Link href="/">Go Home</Link>
    </div>
  )
}

When you move or delete pages, set up 301 redirects to the new location.

# Nginx redirect
rewrite ^/old-page$ /new-page permanent;

# Next.js redirects in next.config
module.exports = {
  async redirects() {
    return [
      { source: "/old-page", destination: "/new-page", permanent: true },
    ]
  }
}

Verify that file references in your code point to the correct paths, especially after restructuring directories.

// ❌ Wrong path
<img src="images/photo.jpg" />

// ✅ Correct path (with leading slash for absolute)
<img src="/images/photo.jpg" />