I encountered an unexpected behavior, in which if I click a link it displays successfully but when I refresh it, it went to 404 page. I suspected it has something with the route list upon reading the code.

From /products/?keyword=&status=draft&type=all to /products/1/?isDraft=true

export default function Custom404() {
  const [fallback, setFallback] = useState(true)

  useEffect(() => {
    const fn = async () => {
      const pages = await Router.router?.pageLoader.getPageList()
      if (!pages || !Array.isArray(pages)) {
        setFallback(false)
        return
      }

      const resolvedRoute = resolveDynamicRoute(Router.asPath, pages) // /sdfsdfs
      if ((pages as string[]).includes(resolvedRoute)) {
        // display page
      } else {
        // return custom 404
      }
    }
    fn()
  })
}

I've been to this stack-link seems its not same case in my end, and also my trailingSlash was already set to true still not working.