404 page

Create a page to display when someone visits a URL that does not exist. minista generates 404.html like any other page; configure your host to serve it as the 404 page.

Table of Contents

• Create a 404 page
• Check the structure and output
• Preview the 404 page
• Configure 404 hosting

Create a 404 page

Create src/pages/404.tsx. No additional plugin is needed if your configuration includes pluginSsg().

import type { Metadata } from "minista/types"

export const metadata: Metadata = { title: "Page not found" }

export default function NotFound() {
  return (
    <>
      <h1>Page not found</h1>
      <p>The URL may have changed or the page may have been removed.</p>
      <a href="/">Back to the home page</a>
    </>
  )
}

Match the home page link to your deployment location. If you publish under /site/, change it to href="/site/". See Layouts for how to reflect the title in the HTML head.

Check the structure and output

Adding 404.tsx to your existing pages adds 404.html to the build output. Only the relevant files are shown below.

src/pages/
├── index.tsx
├── about.md
└── 404.tsx

dist/
├── index.html
├── about.html
└── 404.html

Use 404.md for Markdown or 404.mdx for MDX to output the same file name. Use only one, since pages with the same URL conflict.

Preview the 404 page

Start the development server with npm run dev and open /404 to review the content. After building, use npm run preview to check /404.html.

Opening the 404 page directly and checking its display for a missing URL are separate checks. Verify the response for missing URLs and its HTTP status on your deployed host.

Configure 404 hosting

Publish the contents of dist/ and configure your host to use 404.html for responses to missing URLs. Some services automatically use a file with this name. Check your host's configuration instructions.

After publishing, visit a URL that does not exist and confirm that your page appears and the HTTP status is 404.

A 404 page can appear at URLs at various depths, such as /news/missing/. Relative references to the home page or assets resolve from that URL and may break. An explicit deployment path, such as base: "/" or base: "/site/", is suitable for a shared 404 page. See Build and deploy for details.

Next, Passing data to pages introduces props from metadata and getStaticData().