如果在 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
    }
}