如果在 Wordpress 管理员中找不到数据，如何在 next.js 中返回 404 页面？

Question

我有以下 json 数据

[
    {
        "taxonomy_slug": "product_cat",
        "taxonomy_name": "Categories",
        "frontend_slug": "product-category"
    },
    {
        "taxonomy_slug": "product_tag",
        "taxonomy_name": "Tags",
        "frontend_slug": "product-tag"
    },
    {
        "taxonomy_slug": "gift_box_size",
        "taxonomy_name": "Gift Box Sizes",
        "frontend_slug": "gift_box_size"
    },
    {
        "taxonomy_slug": "product-type",
        "taxonomy_name": "Type",
        "frontend_slug": "product-type"
    }
]

因此，对于每个分类前端 slug，我想为每个分类生成一个页面。

我要生成的网址如下

product-category/{category_item_slug} product-tag/{tag_item_slug} gift_box_size/{gift_box_size_item_slug} product-type/{product-type_item_slug}

现在每个分类都有自己的项目列表，如果 Wordpress 管理员中不存在，我想返回 404 未找到页面。

我有以下文件/文件夹结构

|-> pages
  |-> [taxonomy-frontend-slug]
    |-> [taxonomy-item-slug].js

[taxonomy-item-slug].js文件

import { useRouter } from 'next/router'
import productTaxonomy from '@gb-data/productTaxonomy.json'
export async function getStaticPaths() {

    const paths = productTaxonomy.map((taxonomyData) => {
        return {
            params: { "taxonomy-frontend-slug": `/${taxonomyData.frontend_slug}` }
        }
    })

    console.log('getStaticPaths', paths)
    return {
        paths: paths,
        fallback: false,
    }
}

export async function getStaticProps(context) {
    console.log('getStaticProps context', context)
    return {
        props: {}
    }
}


export default function TaxonomyItemPage() {
    const router = useRouter()
    console.log('router.query', router.query);

    return (
        <div>
            TaxonomyItemPage
        </div>
    )
}

Answer 1

我看到 2 个选项：

1. 不要从getStaticPaths返回不存在的分类法。 如果使用fallback: false ，用户将获得404来获取此 function 未返回的任何路径。

像这样的东西应该可以解决问题：

export async function getStaticPaths() {
    const taxonomies = await getListOfTaxonomiesFromWordpress();
    const paths = taxonomies.map((taxonomyData) => {
        return {
            params: { "taxonomy-frontend-slug": taxonomyData.frontend_slug }
        }
    })

    return {
        paths: paths,
        fallback: false,
    }
}

2. 为路径加载 static 道具时（前提是您没有像1中那样的getStaticPaths function），如果数据在 ZDCEC9B13C1DE515016ZABC 中不可用，则从getStaticProps返回以下内容以获取 0944345ZABC 的顺序：

return {
  notFound: true
};

所以尝试以下方法：

export async function getStaticProps({ params }) {
    const taxonomyData = await getTaxonomyDataBySlugFromWordpress(params['taxonomy-frontend-slug']);
    if (taxonomyData) {
      return {
          props: { taxonomyData }
      }
    }
    
    return {
        notFound: true
    }
}