Having multiple dynamic routes with a static sub-directory

[rickbeermier-racwa]

Summary

I currently have an issue where I have 1 application that encompasses a website that uses its own layout, and a blog site which uses its own layout also.

The issue I have is that when I load a page from my blog site, it passes through the generateMetadata function from the dynamic route of the website segment.

My structure is currently:

app

• (blog)
  • blog
    • [...slug]
      • page.tsx
    • page.tsx
  • layout.tsx
  • error.tsx
  • not-found.tsx
• (website)
  • [...slug]
    • page.tsx
  • layout.tsx

The dynamic slugs are used in both pillars because I am fetching data from a Headless CMS where the slug can be several layers deep.

I also want the (website) pillar to not be in a directory called "website" as I don't want my users to have to type in mysite.com/website/my-web-page.

Is there a way in Next.js where I can segregate these two so that when I load a page from the (blog) pillar, it doesn't run through the (website) pillars' generateMetadata function?

Additional information

No response

Example

No response

[rickbeermier-racwa]

If anyone does come across this post and is looking for the answer, I've managed to work it out.

Basically, like (blog) -> blog, you will want to create a website directory inside of (website). Now in my case, I did not want users to see the word "website" in the url because that is a terrible user experience. I ended up using rewrites in the next config to internally route requests that don't contain "blog" to /website, so next.js knows where to route them, and the user has no idea that under the hood, it's routing via /website.

async rewrites() { return [ { source: "/:path((?!blog/).*)", destination: "/website/:path*", }, ]; },