Skip to content
Watch a live product demo 👀 See how Sanity powers richer commerce experiences
Get help on SlackWatch Sanity demo

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
in 
[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.io – build remarkable experiences at scale

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

Get startedWatch demo

Categorized in

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
After adding the subtitle and running this code npm run graphql-deploy It does nothingSep 15, 2020
how to limit a reference to just one entry in Studio reference input side versus the default as-many-entries-as-you-fill-in-an-array...Sep 18, 2020
Is it possible to fetch more than one "_type" using GROQ?Nov 2, 2020
I want to add a view with the Structure builder (S.view.component) where I list similar documents based on the title. What...Sep 23, 2020
Is there a structure builder example where the format of each preview for the document list is modified?Feb 3, 2021
I have an array of references to a country schema type but it always just returns NULL values for meJan 30, 2021
Hi, I need help with a query for getting the url of an image asset. Here is what I've been trying, but I only get the _ref...Dec 1, 2020
Sanity UI looks brilliant :smiley: Is something like the current date picker possible at the moment? I’m not sure if anicon...Dec 21, 2020
Hey everyone. I have been coding and may have potentially accidentally deleted something. Does anyone know how to resolve...Dec 26, 2020
Hello everyone and happy new year :raised_hands::skin-tone-2:, I have a problem with outputting Portable Text :disappointed:...Jan 1, 2021

Related contributions

Clean Next.js + Sanity app
Template

Featured
Official

A clean example of Next.js with embedded Sanity ready for recomposition.

Cody Olsen

Blog with Built-in Content Editing
Template

Featured
Official

A Sanity-powered blog with built-in content editing and instant previews.