GraphQL Edge Endpoint is not rendering custom Error Pages

Question

On JSS 21.1 with SXA, the Next.js custom error pages functionality isn't working. I've configured it per the documentation.

I've tracked it down to the GraphQL query.

Request:

query ErrorPagesQuery($siteName: String!, $language: String!) {
  site {
    siteInfo(site: $siteName) {
      errorHandling(language: $language) {
        notFoundPage {
          rendered
        }
        notFoundPagePath
        serverErrorPage {
          rendered
        }
        serverErrorPagePath
      }
    }
  }
}

Response

{
  "data": {
    "site": {
      "siteInfo": {
        "errorHandling": {
          "notFoundPage": null,
          "notFoundPagePath": "/404-page",
          "serverErrorPage": null,
          "serverErrorPagePath": "/500-page"
        }
      }
    }
  }
}

So it looks like it is resolving the custom error page paths but not able to render them.

Answer 1

On a hunch I tried renaming the pages and discovered that if you remove all spaces from the page item name it works. There must be a bug in the page item resolving logic somewhere. I also noticed that you can't simply call the page 404 or 500, these seem to be reserved page names in Next.js. I called mine 404Page and 500Page.