Error 'getStaticPaths can only be used with dynamic pages, not '/'' with Next JS

Question

I want to use getStaticPaths for my posts blog with dynamic routes but I get an error while building.

My folder with dynamic routes :

pages/articles/[category]/[slug].js

My Link Navigation:

    <Link href={`/article/${category}/${slug}`} passHref>
      <Card>
        ...some data
      </Card>
    <Link />

My getStaticPaths:

export async function getStaticPaths () {
   
  // retrieve data from cms

  const data = await getAllPreviewPosts()

  // generate the paths

  const paths = data.map( ({ fields: { slug , stackName } }) => ({ 
   params: { category: stackName, slug: slug } 
   }))

  return {
     paths, 
     fallback: false
  }   
}

export async function getStaticProps () {
 /* ... get data from cms */
}

But when I run npm run build I get this error:

Error: getStaticPaths can only be used with dynamic pages, not '/'.

In which file is getStaticPaths ?

Eric Burel
– Eric Burel

2021-04-29 07:13:09 +00:00
Commented Apr 29, 2021 at 7:13 — Eric Burel
– Eric Burel, Commented Apr 29, 2021 at 7:13

arkuuu · Accepted Answer · 2021-04-29 07:24:49Z

3

getStaticPaths defines which pages next.js has to render when exporting. It is used to generate all available dynamic routes. You cannot use that data on the page itself.

To get all available categories and slugs to use it in your navigation component, you need to use getStaticProps to load the data on the page and pass it into your navigation component as props.

You can find an example for this here: https://github.com/vercel/next.js/blob/master/examples/with-static-export/pages/index.js

edited Apr 29, 2021 at 7:24

answered Apr 29, 2021 at 7:18

arkuuu

6487 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

flexiness · Accepted Answer · 2022-04-11 16:04:51Z

It seems the url for getStaticPaths has changed somewhat. Your folder with dynamic routes should be perhaps:

pages/articles/[category]/[[slug]].js

and not:

pages/articles/[category]/[slug].js

The difference between Catch all routes and Optional catch all routes is explained here

Given a file structure such as :

pages
│   ├── 404.js
│   ├── 500.js
│   ├── _app.js
│   └── store
│       └── [[...slug]].js

The following getStaticPaths fnct should cover all these routes:

/store
/store/portfolio
/store/design-system
/store/cart

export async function getStaticPaths() {
  return {
    paths: [
      { params: { slug: [''] } }, // <-- Get the data on the page itself
      { params: { slug: ['portfolio'] } },
      { params: { slug: ['design-system'] } },
      { params: { slug: ['cart'] } },
    ],
    fallback: false
  }
}

Collectives™ on Stack Overflow

Error 'getStaticPaths can only be used with dynamic pages, not '/'' with Next JS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related