Next.js: Getstaticpaths For Nested Dynamic Routes

Imagine you have this data structure: const data = { posts: [{ id: 1, title: 'Post 1' slug: 'post-1' }, { id: 2, title: 'Post 2' slug: 'post-2' }],

Solution 1:

The problem seems to be that your returning this from getStaticPaths data with a wrong shape:

[
  [ { params: {} }, { params: {} } ],
  [ { params: {} } ]
]

The correct shape is:

[
  { params: {} },
  { params: {} },
  { params: {} }
]

Just tried this and it works.

exportasyncfunctiongetStaticPaths() {
      const paths = data.comments.map((comment) => {
        return {
          params: {
            postId: comment.postId,
            commentId: comment.id
          }
        }
      });
    
      console.log(paths);
    
      return {
        paths,
        fallback: false
      }
    };

It generates 3 urls:

• /posts/post-1/1
• /posts/post-1/2
• /posts/post-2/3

Is that what you need?

Solution 2:

Like mention @Aaron the problem is for double array of filter y el map.

 return {
    paths: [
        { params: { id: '1' } },
        { params: { id: '2' } }
      ],
      fallback: ...
}

Doc 📚 ➡ https://nextjs.org/docs/basic-features/data-fetching#the-paths-key-required