Slugs not working?

[KjellConnelly]

Hi Michel! I watched your video and have implemented a 2 tenant nextjs krabs based express server. I want to keep as much as possible within SSG. I'm having trouble with slugs though. I watched your example pretty carefully on YouTube, but you never showed whether slugs actually do work. I saw you created pages/veggies/blog/[slug].js. And you showed what happens when you click the Post components before you created the slug. But then you never showed what happened once the slug has been created.

Maybe I'm doing it wrong, but I can't figure out how to get the slug to work. I keep getting incompatible 'href' and 'as' values errors:

Uncaught (in promise) Error: The provided `as` value (/blog/post1) is incompatible with the `href` value (/website1/blog/[slug]). Read more: https://nextjs.org/docs/messages/incompatible-href-as

I've tried messing with different href and as values, but I can't figure out the right combination to get this working. Any ideas?

[KjellConnelly]

I've played with it a little more. It's still not fully functional, but here's what I've learned so far...

If I want a slug to work, I have to use the actual page path. The way I've done it, at least for 1 site, is to edit next.config.js to add rewrites. This seems to work, but only for unique paths. IE: if I have a /blog directory in both website1 and website2, it won't work. I have to have something like /blog1 and /blog2. This is because SSG doesn't seem to handle the paths correctly. Well, here's what I've done:

Files

• website1
  • index.js
  • blog
    • [slug].js

// website1/index.js
<Link href={`/blog/post-1`}>
   {`Link: docs/docs`}
</Link>

// next.config.js
const nextConfig = {
   ...
   async rewrites() {
    return [
         {
            source:'/blog/:slug',
            destination:'/website1/blog/:slug'
         }
      ]
   }
}

It looks like I'll need to do this for every single tenant... In nextConfig, source has to always be unique.

Any ideas on resolving this?

I can think of 2 solutions which are not ideal.

1. Create my own system of generating blog post .js files and exporting them the correct directory before build. The problem with this is that I won't be able to use shared layouts. Each time I click a link, it will rerender the whole page. Each post will be wrapped in the same layout unfortunately. This is the reason I want slugs mainly.

2. Have unique directories for ones with slugs in them. So if I have 10 tenants who run a blog, the url cannot be {website}/blog. Instead it'll have to be something like

• {website}/myBlog,
• {website}/jays-blog,
• {website}/blogging,
• {website}/blog,
• {website}/blogger,
• {website}/blogtastic,

This solution is ugly, and though I haven't thought through the implications of it, I'm willing to bet each tenant will have to have some sort of unique config file with certain keys, like the blogKey, or whatever. This is possible if I run all tenants. But if I have other people using them, I'll have to run certain checks to make sure keys aren't taken, or modify keys at build time when there are duplicate keys. Ugly ugly stuff.