NextJS - 类别（标签） - 动态页面答案

【问题标题】：NextJS - Categories (Tags) - Dynamic PagesNextJS - 类别（标签） - 动态页面
【发布时间】：2021-07-31 03:45:00
【问题描述】：

我正在使用带有静态站点生成的 Next.js，并且我创建了一个类别（标签）组件，如下所示：

import Link from "next/link";

export default function CategorySection({ categories }) {
  return (
    <Wrapper>
      <ContentWrapper>
        <CategoryWrapper>
          {categories.map((category) => {
            return (
              <>
                {category.contentfulMetadata.tags.map((tag) => {
                  return (
                    <Link href={`/articles/categories/${tag.id}`}>
                      <Categories>{tag.name}</Categories>
                    </Link>
                  );
                })}
              </>
            );
          })}
        </CategoryWrapper>
      </ContentWrapper>
    </Wrapper>
  );
}

我希望能够为所有标签创建动态页面并仅显示与该标签相关的文章。

我在以下位置创建了我的 [slug].jsx 文件：/pages/articles/categories/[slug].jsx

[slug].jsx 文件如下：

import { getArticles, getArticle } from "../../../utils/contentful";

export async function getStaticPaths() {
  const data = await getArticles();

  return {
    paths: data.articleCollection.items.map((article) => ({
      params: { slug: article.contentfulMetadata.tags.id },
    })),
    fallback: false,
  };
}

export async function getStaticProps(context) {
  const data = await getArticle(context.params.slug);

  return {
    props: { article: data.articleCollection.items[0] },
  };
}

export default function Category({ article }) {
  return <h1>{article.contentfulMetadata.tags.name}</h1>;
}

使用文章页面上的标签导航时出现以下错误：

错误：未在 getStaticPaths 中为 /articles/categories/[slug] 提供所需参数（slug）

我怎样才能让它使用标签创建动态页面？

【问题讨论】：

不传递数字供 slug 使用 .toString()
我试过 .toString() 但它说它是未定义的。
在哪里？ , "article.contentfulMetadata.tags.id" 是一个数字？
@MathiasRiisSørensen 如果article.contentfulMetadata.tags.id 未定义，则不应为其生成路径。在getStaticPaths 中为其添加路径之前，请确保该值有效。
好的，有道理。当我使用 GraphiQL 时，我可以查询 contentfulMetadata.tags.id，它也用于我在文章页面上的文章卡片上。 id 输出字符（字符串）而不是数字。

标签： next.js

【解决方案1】：

错误：在 getStaticPaths 中没有为 /articles/categories/[slug] 提供一个必需的参数（slug）

在您的 getStaticPaths 中，您需要将 slug 转换为字符串。

params: { slug: article.contentfulMetadata.tags.id.toString() }

【讨论】：

嗨，当我这样做时，我收到以下错误消息：“TypeError: Cannot read property 'toString' of undefined”
当你 console.log(article.contentfulMetadata.tags.id) 你有什么？
它输出一个包含我当前拥有的标签的数组。
这样的问题就是不能将数组转换成字符串需要迭代article.contentfulMetadata.tags.id
@MathiasRiisSørensen 请给我看看console.log(article.contentfulMetadata.tags.id)的结果