Get help on Discord

Next.js slug conflict: getStaticPaths returning duplicate paths with static page

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.
AI Update

The issue you're encountering is a common Next.js routing conflict. When you have both [slug].js (a dynamic catch-all route) and people.js (a static route) in the same pages folder, Next.js is complaining because your getStaticPaths in [slug].js is likely returning a path that includes "people" as one of the slugs.

Here's what's happening: if your Sanity query in [slug].js returns documents that include one with a slug of "people", Next.js sees two routes trying to handle /people - both the dynamic [slug].js route and the static people.js file. This creates the "paths must unique per page" error.

Solutions:

  1. Filter out conflicting slugs in getStaticPaths (recommended):
// [slug].js
export const getStaticPaths = async () => {
   const paths = await sanityClient.fetch(currentPage);
   
   // Filter out any paths that conflict with static pages
   const filteredPaths = paths.filter(path => {
      const slug = path.params?.slug || path.slug;
      return slug !== 'people'; // Add other static page slugs here
   });

   return {
      paths: filteredPaths,
      fallback: false
   };
};

  1. Restructure your routes: Move people.js into a subfolder or rename it to avoid conflicts. For example, create a /team/people.js route instead.

  2. Consolidate into the dynamic route: Remove people.js entirely and handle it through your [slug].js by creating a "people" document in Sanity with the appropriate content type.

Additional note about your path format: Make sure your currentPage query returns paths in the correct format. The paths array should look like:

paths: [
  { params: { slug: 'about' } },
  { params: { slug: 'contact' } },
  // etc.
]

If your query is returning slugs directly as strings, you'll need to map them:

const slugs = await sanityClient.fetch(currentPage);
const paths = slugs.map(slug => ({ params: { slug } }));

The first solution (filtering) is typically the cleanest approach when you have a mix of static and dynamic pages. Just make sure to exclude any slug values that match your static page filenames.

Show original thread
18 replies
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.
Something like
*[_type == "page"]{ "slug": slug.current }
user U


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

Ah, right that looks ok - in that case I think you might have a page with the slug “people”?
That’ll clash with people.js
As they’re both trying to create /people
Correct!
user U
The reason actually is that the people.js needs another HTML structure layout.
In that case! I’ve got just the code… had to do something similar recently.
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,
  };
}
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 } };
};

In slug, all it does is skip rendering for a single path:
filter((page) => page.slug !== "climate-emergency")
Yours would be:
filter((page) => page.slug !== "people")
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

nvm fallbsack false solved it 😄 Thanks bud
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

nvm fallbsack false solved it 😄 Thanks bud

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?