Next.js Dynamic Routing - How to Get StaticProps and GetStaticPaths in [slug].js?

6 replies

Last updated: Jun 20, 2022

Hey all,
I'm not sure if my question is more related to Sanity or Nextjs dynamic routing but I'll ask anyway:

I have a parent page (

pages/numeros/index.js

) that renders two types of content (listing posts w/ schema "numeros" and "archive"). When clicking into a numero or archive article, both schema should render into

numeros/[slug].js

with the same styling and formatting, since both schema contain the exact same data fields (for all intents and purposes they're the same thing, one is just reserved for their archived 'numeros' publications and as such is categorized differently on the

numeros/index.js

page).
I'm getting the numeros schema to render properly, but when I click into an archive post I get the following error, because I'm not sure how to handle the slug parameter in

getStaticProps

and

getStaticPaths

for both schema at once.
So the question is, how should I go about allowing for two data input streams for

[slug].js

?
Here is my

getStaticProps

and

getStaticPaths

[slug].js

export async function getStaticProps({ params }) {
  const footerLogos = await client.fetch(footerLogoQuery);

  let slug;
  const numero = await client.fetch(numeroQuery, {
    slug: params.slug,
  });

  const readMoreData = await client.fetch(numeroReadMoreQuery, {
    slug: params.slug,
  });

  return {
    props: {
      numero,
      readMoreData,
      footerLogos,
    },
  };
}

export async function getStaticPaths() {
  const paths = await client.fetch(
    groq`*[_type == "numero" && defined(slug.current)][].slug.current`
  );

  return {
    paths: paths.map((slug) => ({ params: { slug } })),
    fallback: true,
  };
}

I'm not sure how I should go about this, because I can't just add in

getStaticProps

for instance, as I would have two declarations of

numero

  const numero = await client.fetch(archiveListQuery, {
    slug: params.slug,
  });

Jun 17, 2022, 10:40 PM

There is a lot to unpack here.

Jun 18, 2022, 8:48 AM

First gut feeling: if both content types are essentially the same, they should be the same collection, not two different ones. It feels like you’re making your work harder right now.

Jun 18, 2022, 8:49 AM

If your page can fetch documents from two different types, it seems that you can just update your query to select from 2 types. So instead of

_type == "numero"

, it would be

_type in ["numero", "archive"]

Jun 18, 2022, 8:50 AM

This can be done in both the

getStaticPaths

and the

getStaticProps

functions so you get either a numero or an archive based on the slug.

Jun 18, 2022, 8:50 AM

Thanks Kitty, I ended up finding a workaround 🙂

Jun 20, 2022, 2:15 PM

Ah, alright. 🙂

Jun 20, 2022, 2:33 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for free Explore the demo

Next.js Dynamic Routing - How to Get StaticProps and GetStaticPaths in [slug].js?

Sanity– build remarkable experiences at scale

Was this answer helpful?