Tip for anyone adding Plasmic into a Next.js app that has dynamic routes

Hi folks! Wanted to document a problem and solution my team ran into. We’re adopting Plasmic into a NextJS app that has dynamic routes.

We had a dynamic route at /path/[foo]/[bar] that generated pages based on data we have stored in JSON files in the repo. We wanted to publish a plasmic page at /path/plasmic/page . We have a plasmic catchall at the root (/[…catchAll].tsx). This worked perfectly in dev and when getStaticProps was called in the build but not after revalidation.

We were able to resolve it by using Next’s rewrite configs in next.config.js . We moved the existing dynamic pages to another path (newPath/[foo]/[bar]). We added a set of rewrites based on the static data we had already to map /path/foo/:slug* to /newPath/foo/:slug* without changing the URL users see. We also added a redirect from /newPath/:slug* to /path/:slug* to make sure /newPath isn’t accessible.

Wow! TIL. Thanks for sharing!