Skip to content
Get help on Slack

Issue with conflicting paths in Next.js build

18 replies
Last updated: Jul 14, 2021
Not sure what I am doing wrong using Next js for a month or two now. But I have noticed i am unable to build my website because of the [slug].js inside the pages folder and a static file “people.js”.

Conflicting paths returned from getStaticPaths, paths must unique per page.
[slug].js


export const getStaticPaths = async () => {
   const paths = await sanityClient.fetch(currentPage);

   return {
      paths,
      fallback: false
   };
};

export const getStaticProps = async ({ params }) => {
   const { slug } = params;
   const page = await sanityClient.fetch(pageQuery, { slug });
   return { props: { data: { page }, preview: true } };
};
people.js


export const getStaticProps = async () => {
   const data = await sanityClient.fetch(` {
      "page": ${pagePeopleQuery},
      "friends": ${friendsQuery},
    }`);

   return { props: { data } };
};
Am I missing something here? Thanks guys.
Jul 14, 2021, 6:28 PM
You’re trying to create two pages with the same url, but it looks like you might be misusing the getStaticPaths function. Although I’m not 100% as I’m not sure what your 
currentPage
query looks like. It should fetch a list of documents and return their slugs.
Jul 14, 2021, 7:05 PM
Something like
*[_type == "page"]{ "slug": slug.current }
Jul 14, 2021, 7:06 PM
user U


// Get current page "slug" content.
export const currentPage = `*[_type == "page" && defined(slug.current)]{
    "params": {
      "slug": slug.current
    }
  }`;

Jul 14, 2021, 7:06 PM
Ah, right that looks ok - in that case I think you might have a page with the slug “people”?
Jul 14, 2021, 7:07 PM
That’ll clash with people.js
Jul 14, 2021, 7:07 PM
As they’re both trying to create /people
Jul 14, 2021, 7:07 PM
Correct!
user U
The reason actually is that the people.js needs another HTML structure layout.
Jul 14, 2021, 7:08 PM
In that case! I’ve got just the code… had to do something similar recently.
Jul 14, 2021, 7:09 PM
export async function getAllDocSlugs(doc) {
  const data = await getClient().fetch(
    `*[_type == "${doc}"]{ "slug": slug.current }`
  );
  return data;
}

export async function getStaticPaths() {
  const allPages = await getAllDocSlugs("page");

  return {
    paths:
      allPages
        ?.filter((page) => page.slug !== "climate-emergency")
        .map((page) => {
          return {
            params: {
              slug: page.slug,
            },
          };
        }) || [],
    fallback: true,
  };
}
Jul 14, 2021, 7:09 PM
user U
Where does this has to go? In the [slug].js or people.js

import { sanityClient, PortableText } from "lib/sanity";
import { pagePeopleQuery, friendsQuery } from "lib/queries";

import { Friends } from "components/Friends";

const People = ({ data }) => {
   const { friends, page } = data;
   const { title, body } = page;

   return (
      <>
         <h1>{title}</h1>
         <PortableText blocks={body} />
         <Friends data={friends} />
      </>
   );
};

export default People;

export const getStaticProps = async () => {
   const data = await sanityClient.fetch(` {
      "page": ${pagePeopleQuery},
      "friends": ${friendsQuery},
    }`);

   return { props: { data } };
};

Jul 14, 2021, 7:10 PM
In slug, all it does is skip rendering for a single path:
Jul 14, 2021, 7:11 PM
filter((page) => page.slug !== "climate-emergency")
Jul 14, 2021, 7:12 PM
Yours would be:
Jul 14, 2021, 7:12 PM
filter((page) => page.slug !== "people")
Jul 14, 2021, 7:12 PM
user U
hey man nice thanks!
One issue I get now after trying to build is:


info  - Using webpack 5. Reason: Enabled by default <https://nextjs.org/docs/messages/webpack5>
info  - Checking validity of types  
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data  
[ ===] info  - Generating static pages (0/9)
Error occurred prerendering page "/[slug]". Read more: <https://nextjs.org/docs/messages/prerender-error>
TypeError: Cannot read property 'page' of undefined
    at SinglePage

Jul 14, 2021, 7:25 PM
nvm fallbsack false solved it 😄 Thanks bud
Jul 14, 2021, 7:25 PM
user U
hey man nice thanks!
One issue I get now after trying to build is:


info  - Using webpack 5. Reason: Enabled by default <https://nextjs.org/docs/messages/webpack5>
info  - Checking validity of types  
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data  
[ ===] info  - Generating static pages (0/9)
Error occurred prerendering page "/[slug]". Read more: <https://nextjs.org/docs/messages/prerender-error>
TypeError: Cannot read property 'page' of undefined
    at SinglePage

Jul 14, 2021, 7:25 PM
nvm fallbsack false solved it 😄 Thanks bud
Jul 14, 2021, 7:25 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 freeExplore the demo

Was this answer helpful?