Error redirecting to 404 when Linking to a dynamic page outside wp-templates.

[tuanfront-end]

Thank you for creating a great project, but I have this problem, I hope you can help. When I create a dynamic page outside of wp-templates, when I redirect through a Link it will go to the 404 page, but on hard reload the page loads properly.

Steps to initiate the problem:

1. Clone this repo - https://github.com/wpengine/faust-scaffold-ts
2. Add page /src/pages/post/[id]/index.tsx

import { useRouter } from "next/router";
import Link from "next/link";
import { GetStaticPaths, GetStaticPropsContext } from "next";
import React from "react";
import { getNextStaticProps } from "@faustwp/core";

export default function PostPage() {
  const router = useRouter();
  const id = router.query.id as string;

  return (
    <>
      <h1>Post: {id}</h1>
      <ul>
        <li>
          <Link href={`/post/${id}/first-comment`}> First comment</Link>
        </li>
        <li>
          <Link href={`/post/${id}/second-comment`}> Second comment</Link>
        </li>
      </ul>
    </>
  );
}

export function getStaticProps(ctx: GetStaticPropsContext) {
  return getNextStaticProps(ctx, {
    Page: PostPage,
  });
}

export const getStaticPaths: GetStaticPaths = () => {
  return {
    paths: [],
    fallback: "blocking",
  };
};

3. Add page /src/pages/post/[id]/[comment].tsx

import { getNextStaticProps } from "@faustwp/core";
import { GetStaticPaths, GetStaticPropsContext } from "next";
import { useRouter } from "next/router";
import React from "react";

export default function CommentPage() {
  const router = useRouter();
  const id = router.query.id as string;
  const comment = router.query.comment as string;

  return (
    <>
      <h1>Post: {id}</h1>
      <h1>Comment: {comment}</h1>
    </>
  );
}

export function getStaticProps(ctx: GetStaticPropsContext) {
  return getNextStaticProps(ctx, {
    Page: CommentPage,
  });
}

export const getStaticPaths: GetStaticPaths = () => {
  return {
    paths: [],
    fallback: "blocking",
  };
};

4. Add to src/__app.tsx

   <>
       <Link href="/post/example">_____/post/example</Link>
       <br />
       <Link href="/post/example-1/second-comment">
         ___/post/example-1/second-comment
       </Link>
     </>

5. Click on the 2 links in the __app file, the /post/example-1/second-comment link works correctly. But the /post/example link will redirect to 404 page, however, when hard reloading, the page will load properly again.

6. That's all, Or to be faster you can please check this repo - https://github.com/tuanfront-end/ncmaz-faust-scaffold-ts