404 Page | Yext Hitchhikers Platform

To create a custom 404 page, you should create a static template and place it in the templates directory: src/templates/404.tsx . In your template, the path returned from getPath must be “404.html.” The pages serving system will automatically serve this 404 page anytime a user visits a route that is not found.

light bulb
The 404 page will currently only appear in production, not in local dev. To test out your 404 page, make a deploy ( follow these steps ) and check out your 404 page at a production URL.

Here is a simple example that just prints 404 - Page Not Found:

// src/templates/404.tsx
import {
} from "@yext/pages";
import * as React from "react";

// The path must be exactly 404.html
export const getPath: GetPath<TemplateProps> = () => {
  return "404.html";

// Add a title to the page
export const getHeadConfig: GetHeadConfig<TemplateRenderProps> = () => {
  return {
    title: "Page Not Found",

// Template that will show as the page
const FourOhFour: Template<TemplateRenderProps> = () => {
  return (
    <h1>404 - Page Not Found</h1>

export default FourOhFour;