Problem of unknown routing

[Joelgullander]

Hey,

Lets say I use a CMS for resolving slugs before I know the pagetype that should be rendered. For example if a user comes it to /en/newspage, and I fetch my CMS for the slug and it returns a pageType property that I need to render like below:

{
  url: "/en/newspage",
  pageType: "newspage"
}

There is no way for me to build up a parameterized routingtable at runtime before resolving a route. So my general question is if NextJS has a feature for this or what the best approach would be. One approach that comes to my mind is to only use the index page and fetch the slug from there and conditionally render my pagecomponent myself, is there a better way?

[leerob]

I'm not sure that architecture is the best approach. Could you have a specific API for the newspage instead of looping multiple pages into the same API endpoint?

For example, pages/en/newspage/[page].js would render all of the news pages and would be able to share that same newsapge layout. Then, it could fetch information from your CMS in getStaticProps / getStaticPaths to build out all of the individual news pages.

[Joelgullander]

Maybe a bad example, but what I mean in short is that the editors can choose any pagelayout under any subroute. So different pagetypes can be mixed under the same path.

[leerob]

A catch-all dynamic route would allow you to handle a nested structure like that. As for changing out which template is shown, maybe something like this.

function Page({ layout }) {
  if (layout.pagePage === 'newspage') {
    return <div>Newspage</div>
  }

  return 'Other Page'
}

export async function getStaticProps() {
  const res = await fetch('https://.../your-api')
  const layout = await res.json()

  return {
    props: {
      layout
    }
  }
}

[Joelgullander]

And then I assume I would be able to lazily load the pagetemplates aswell within that catchall page so that it doesnt affect the chunking. I guess that would work.

[Joelgullander]

Thanks @leerob

[leerob]

No problem! Does that answer your question?