'NextJS multiple dynamic routes with different destionation

In my project I have the following requirement: having 2 routes that are dynamic but that are going to be drawn by different components.

More context:

I have a CMS that provides all the info and in most of the cases I'm going to read from a "page" model. This is going to be drawn by the Page component and its going to have a getServerSideProps that makes a call to a CMS endpoint to get that information

The endpoint and component are not the same for the other case with a dynamic route

Both types of routes are completely dynamic so I cannot prepare then in advance (or at least I'm trying to find another solution) since they come from the CMS

As an example, I can have this slugs

mypage.com/about-us (page endpoint & component)
mypage.com/resource (resources endpoint & component) 

Both routes are configured using dynamic routes like this

{
  source: '/:pages*',
  destination: '/cms/pages'
}

The problem here is that it can only match one of the endpoints and the logic for both calling the endpoint and the component used to draw it are completely different

Is there a way of fallbacking to the next matched URL in case that there's more than one that matches similar to the return {notFound: true}?

Some solutions that I have are:

  • Somehow hardcode all the resources urls (since are less than pages) and pass them as defined routes instead of dynamic routes
  • Make some dirty code that will check if the slug is from a resource and if not fallback to a page and then return a Resource component or a Page component depending on that (this idea I like it less since it makes the logic of the Page component super dirty)

Thanks so much!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source