404 / Not Found page

The 404 or Not Found page is the page shown when no middleware returns a response.

Steps on how to create your own.

Create your page

Example of a jsx page

tsx⎘ Copy
import {LayoutProps} from "@combostrap/interact/types";

export const frontmatter = {
    "layout": "hamburger",
    "title": "Not Found"
}

export default function NotFound(layoutProps: LayoutProps) {

    return <p>Error: The page {layoutProps.context.url.pathname} was not found</p>

}

Save it

By default, the 404 page should be named 404 and located in the page directory

With the default pages directory of src/pages, if you create a:

• mdx page save it under src/pages/404.mdx
• md page save it under src/pages/404.md
• (jsx|tsx) page save it under src/pages/404.jsx/src/pages/404.tsx

Configuration

The 404 page path is configured in middelware.notFoundPath property of the configuration file.

Default to the standard /404 supported by most of the pages hosting service such as GitHub.

Static Rendering

If a 404 page was not defined, we generate still one at /404 to conform to the hosting platforms, such as GitHub Pages