Blog posts defaulting to a template in pages/ directory instead of template defined in wp-templates

[arielsehr]

Description

I have a site full of blogs posts with url.com/blog-post-title. When I work on local, and for the first fifteen minutes or so on an Atlas server, my blog posts correctly appear using the single.js template that I have mapped in my index.js in my wp-templates folder.

However, it seems to be that on revalidation, the blog posts end up using a dynamic routes template I have in my pages folder. That template is something like: [category].js

and it uses getStaticPaths to generate paths I outlined in a separate doc. These paths just work, and I have a [category].js folder with templates inside that also seem to always work.

But...using a dynamic routes template seems to confuse the Faust router, but only on revalidate.

Steps to reproduce

Create a dynamic routs template in pages. Create a single.js template in wp-templates and map it accordingly in the index.js.

Set the revalidate to 10: export function getStaticProps(ctx) { return getWordPressProps({ ctx, revalidate: 10 }); }

run npm build and start. see if after a few seconds your blog posts start to use the template from your dynamic route.

Additional context

No response

@faustwp/core Version

1.0.3

@faustwp/cli Version

1.0.1

FaustWP Plugin Version

1.2.1

WordPress Version

6.4.3

Additional environment details

I'm on Atlas.

Please confirm that you have searched existing issues in the repo.

• [X] Yes

[theodesp]

Hello @arielsehr Thank you for the report.

Are you saying that you have both [[...wordpressNode].js] and a dynamic route in the same folder?

Could we see a small reproduction please?

[arielsehr]

@theodesp Yes I have both of those in the same pages folder, but the issue also happens when I use index.js in my [category].js folder.

It only happens on revalidate -- doesn't something change with [[...wordpressNode].js] that would prioritize my pages folder, but only on revalidate?

[theodesp]

Hey @arielsehr thank you.

It seems that if you have both a dynamic route and a catch-all route in the same folder then Next.js will prioritize the dynamic route first and then the catch-all route.

For example I have this folder structure:

examples/next/faustwp-getting-started/pages
├── [...wordpressNode].js
├── [category].js
├── _app.js
├── api
│   ├── auth
│   └── faust
│       └── [[...route]].js
├── index.js
└── preview.js

The [category].js contents are:

import { useRouter } from 'next/router';

export default function CategoryPage({data}) {
  const router = useRouter();
  const { category } = router.query;

  // Logic to fetch or display content based on the category
  return (
    <div>
      <a href="/blog/news">Back to News</a>
      <h1>Category: {category}</h1>
      <h1>Random Numbers:</h1>
      <ul>
        {data.map((number) => (
          <li key={number}>{number}</li>
        ))}
      </ul>
    </div>
  );
}

export async function getStaticPaths() {
  return {
    paths: [],
    fallback: 'blocking',
  }
}

async function fetchData() {
  const response = await fetch('https://www.randomnumberapi.com/api/v1.0/random?min=100&max=1000&count=5'); // Replace with your API endpoint
  const data = await response.json();
  return data;
}

export async function getStaticProps() {
  const data = await fetchData();

  return {
    props: { data },
    revalidate: 10, // Revalidate every 10 seconds
  };
}

Now even if my permalink structure is /%postname%/ it will still match the [category].js page.

When I visit a page like /blog/news it will match the catch all routes in [...wordpressNode].js.

[ariel-integrity]

@ChrisWiegman I believe this can be closed with the response from @theodesp above.

[ChrisWiegman]

@ariel-integrity I am no longer with WP Engine so I'll leave it to y'all from here.