The 404 Page

Create `src/pages/404.astro` — Astro uses it when no other route matches.

2 min read Level 1/5 #astro#404#routing

What you'll learn

Add a custom 404 page
Know what shows in dev vs production

If no route matches, Astro serves src/pages/404.astro.

Add One

---
// src/pages/404.astro
---
<html>
  <head><title>Not Found</title></head>
  <body>
    <h1>404 — Page Not Found</h1>
    <p>Sorry, that page doesn't exist.</p>
    <p><a href="/">Back to the home page →</a></p>
  </body>
</html>

In static mode, Astro generates dist/404.html. Most static hosts (Netlify, Vercel, Cloudflare Pages) automatically serve that file for unmatched URLs.

In Server Mode

The server returns the 404 page with status 404. No host configuration needed.

A Useful Pattern — Show the Requested URL

---
const path = Astro.url.pathname;
---
<p>We couldn't find <code>{path}</code>.</p>

Helpful when the user might have mistyped.

Up Next

Layouts — wrappers for pages that share headers, footers, and head tags.

Layouts →