Routing with Permalinks set to /blog/%postname%/

[sambrodie]

Describe the bug

Pages Router

In the pages router, when permalinks are set to /blog/[slug], a post url will load the Archive component in BlogPage in blog/[[…path]].tsx. When permalinks are set to /news/[slug], a post url will load the SinglePostsPage in […path].tsx.

App Router

In the app router, when permalinks are set to /blog/[slug], a post url will try to load BlogPage in blog/[[…path]]/page.tsx, but will produce an error:

Error: Neither single or archive returned data: Post

When permalinks are set to /news/[slug], a post url will load Single in (single)/[…path]/page.tsx.

Blog Categories

This setup also makes it so that when permalinks are set to something like /news/[slug] or /blog/[slug], the category pages still show at /category/[slug] instead of /news/category/[slug].

How do we want Headstart to support different permalink structures?

Steps to Reproduce

See above

Screenshots, screen recording, code snippet

No response

Environment information

No response

WordPress information

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[nicholasio]

For the Blog Categories, the expectation is that the Next.js app would need to be updated to remove the /category route in favor of /news/category. Permalinks in HeadstartWP needs to be mapped 1:1 and are not fully automatically handled.

The same for /news/post-name, ideally there would be a /news/[...path].tsx in Next.js (for pages router). THe reason this works is bc it falls in the root catch-all [...path].tsx.

The only "bug" that I see here is the fact that changing post permalinks to /blog/post-name does not work on the /blog/[[...path]].tsx. (pages router) or the /blog/[[...path]]/page.tsx (App Router) The reason it does not work is that path matching fails since HeadstartWP will match the post urls which includes /blog/ with the next.js path which does not. A workaround is to add matchCurrentPath: false, to PostOrPostsParams.

This is probably a miss on the PostOrPosts strategy since we advocate for Next.js router matching 1:1 the wordpress permalinks and for the blog route to work properly it means it would not match.

[nicholasio]

I'll add to this that, the reason PostOrPosts made sense in the first place was because handling this use case in the pages router was much more difficult, but I suspect this is less important in the App Router era and I haven't seen much adoption to the PostOrPosts strategy so we may well decide to deprecate it.

[nicholasio]

After spending some time on this, the fix is actually easy and is implemented in #905 .We have single and archive config options when declaring a post type, so if we want to change the base of single post (or pages) all we need to do is update the default post types definitions and make the single propery point to the correct prefix.

In the example here it would look something like this

// headstartwp.config.js
module.exports = {
  customPostTypes: (defaultPostTypes) => {
      return defaultPostTypes.map((postType) => {
         if (postType.slug === 'post') {
            return { ...postType, single: '/blog', archive: '/blog' };
        }
       return postType;
      });
  };
};