Next.js:用于嵌套动态路由的 getStaticPaths [英] Next.js: getStaticPaths for nested dynamic routes

问题描述

想象一下你有这个数据结构:

const data = {帖子:[{编号:1，标题:帖子1"弹头:后1"}, {编号:2，标题:帖子2"弹头:后2"}],注释: [{编号:1，postId: "post-1",文本:帖子 1 的评论 1"；}, {编号:2，postId: "post-1",文本:帖子 1 的评论 2"；}, {编号:3，postId: "post-2",文字:帖子 2 的评论 1"；}]}

您有以下路线 /posts/[postId[/[commentId]所以 Next.js 结构文件夹是:posts/[postId]/[commented].js

然后你需要为这个路由生成静态路径.

我的编码如下:

导出异步函数 getStaticPaths() {const { 帖子、评论 } = 数据const 路径 = posts.map((post) => {回复评论.filter((comment) => comment.postId === post.slug).map((评论) => {返回 {参数:{postId: post.slug,评论 ID:评论.id}}})})}

但它不起作用.抛出的错误是:

错误:从页面/clases/[courseId]/[lessonId]"中的getStaticPaths"返回了其他键.用于此动态路由的 URL 参数必须嵌套在 `params` 键下，即:返回 { 参数: { postId: ..., commentId: ... } }需要移动的键:0、1.

我如何映射"或循环"将数据转换为正确的返回格式?提前致谢！

解决方案

问题似乎是你从 getStaticPaths 数据返回的这个形状错误:

<预><代码>[[ { 参数: {} }, { 参数: {} } ],[ { 参数:{} } ]]

正确的形状是:

<预><代码>[{参数:{}}，{参数:{}}，{参数:{}}]

刚刚试过了，它有效.

 导出异步函数 getStaticPaths() {const 路径 = data.comments.map((comment) => {返回 {参数:{postId:comment.postId，评论 ID:评论.id}}});控制台日志(路径)；返回 {路径，回退:假}};

它生成 3 个网址:

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

这是你需要的吗?

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"
  }],

  comments: [{
    id: 1,
    postId: "post-1",
    text: "Comment 1 for Post 1"
  }, {
    id: 2,
    postId: "post-1",
    text: "Comment 2 for Post 1"
  }, {
    id: 3,
    postId: "post-2",
    text: "Comment 1 for Post 2"
  }]
}

An you have the following route /posts/[postId[/[commentId] so the Next.js structure folder is: posts/[postId]/[commented].js

Then you need to generate the static paths for this routes.

I'm coded the following:

export async function getStaticPaths() {
  const { posts, comments } = data
  const paths = posts.map((post) => {
    return comments
      .filter((comment) => comment.postId === post.slug)
      .map((comment) => {
        return {
          params: {
            postId: post.slug,
            commentId: comment.id
          }
        }
      })
  })
}

But it's not working. The throwed error was:

Error: Additional keys were returned from `getStaticPaths` in page "/clases/[courseId]/[lessonId]". 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.

How I can "map" or "loop" the data to a proper returned format? Thanks in advance!

解决方案

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.

    export async function getStaticPaths() {
      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?

这篇关于Next.js:用于嵌套动态路由的 getStaticPaths的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！