title: Next.js: getStaticPaths for nested dynamic routes
body: <p>Imagine you have this data structure:</p>
  <pre class="lang-js prettyprint-override"><code>const data = {
    posts: [{
      id: 1,
      title: &quot;Post 1&quot;
      slug: &quot;post-1&quot;
    }, {
      id: 2,
      title: &quot;Post 2&quot;
      slug: &quot;post-2&quot;
    }],
  
    comments: [{
      id: 1,
      postId: &quot;post-1&quot;,
      text: &quot;Comment 1 for Post 1&quot;
    }, {
      id: 2,
      postId: &quot;post-1&quot;,
      text: &quot;Comment 2 for Post 1&quot;
    }, {
      id: 3,
      postId: &quot;post-2&quot;,
      text: &quot;Comment 1 for Post 2&quot;
    }]
  }
  </code></pre>
  <p>An you have the following route <code>/posts/[postId[/[commentId]</code>
  so the Next.js structure folder is: <code>posts/[postId]/[commented].js</code></p>
  <p>Then you need to generate the static paths for this routes.</p>
  <p>I'm coded the following:</p>
  <pre class="lang-js prettyprint-override"><code>export async function getStaticPaths() {
    const { posts, comments } = data
    const paths = posts.map((post) =&gt; {
      return comments
        .filter((comment) =&gt; comment.postId === post.slug)
        .map((comment) =&gt; {
          return {
            params: {
              postId: post.slug,
              commentId: comment.id
            }
          }
        })
    })
  }
  </code></pre>
  <p>But it's not working. The throwed error was:</p>
  <pre><code>Error: Additional keys were returned from `getStaticPaths` in page &quot;/clases/[courseId]/[lessonId]&quot;. URL Parameters intended for this dynamic route must be nested under the `params` key, i.e.:
  
          return { params: { postId: ..., commentId: ... } }
  
  Keys that need to be moved: 0, 1.
  </code></pre>
  <p>How I can &quot;map&quot; or &quot;loop&quot; the data to a proper returned format?
  Thanks in advance!</p>