# 404 / Not Found page

The *404* or *Not Found* page is the [page](page) shown when no [middleware](middleware) returns a response.

## Steps on how to create your own.

### Create your page

Example of a [jsx page](page-module)

```tsx
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](directory-layout)

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

* [mdx page](mdx) save it under *src/pages/404.mdx*
* [md page](md-page) save it under *src/pages/404.md*
* [(jsx|tsx) page](page-module) 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](conf).

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](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-custom-404-page-for-your-github-pages-site)