SSG 页面的 NextJS 不区分大小写的路由

Question

我正在使用 NextJS 将 CSV 数据转换为静态页面。每个页面都是pages/[slug].jsx。我在 [slug].jsx getStaticPaths() 和 getStaticProps() 函数内的 slug 值上调用 toLowerCase()。生成的页面是小写的。例如/ab101、/ab102、/cc500 都解析到 pages/[slug].jsx 页面。

不幸的是，人们可能手动输入 url，并且可能使用大写或混合大小写作为 slug 值，目前导致 404。

问题：如何使路由对 slug 值不区分大小写？

更新

当我从getStaticPaths() 返回fallback: true 时，即使没有完全匹配的路径，我的[slug].jsx 文件也会被命中。然后我可以检查isFallback，如下面的 Anish Antony 所示。

此外，当找不到页面时，传递给我的页面的 items 参数将是未定义的。路由器的pathname 值是"/[slug]" 而不是“slug”的值。但是，有一个 asPath 值包含有用的数据，例如/mixedCaseSlug?param=value&foo=bar.

当页面呈现时，我检查它是否是一个后备。如果是，则显示 LOADING... 消息。接下来将显示它并调用 getStaticProps() 来生成“缺失”页面。然后，您将使用页面数据重新渲染。如果 getStaticProps 无法获取页面数据，我会推送一条路径，该路径将通向内置的 404 页面。

export default function Page({ item }) {
  const { isFallback, push } = useRouter()
  const hasPageData = item && Object.keys(item).length > 0
  useEffect(() => {
    if (!isFallback && !hasPageData) {
      push('/page-not-found/error')
    }
  }, [isFallback, hasPageData])
  const loadingMsg = <div>Loading...</div>
  const notFoundMsg = <div>Page not found</div>
  return isFallback ? loadingMsg : hasPageData ? <Item item={item} /> : notFoundMsg
}

我需要将getStaticProps() 更新为小写slug 参数，因为它现在可能是大小写混合，但我们想找到我们的页面数据。而且我需要考虑到确实没有 slug 数据的情况。

export async function getStaticProps({ params }) {
  const { slug } = params
  const item = data.find(o => o.Practice_Code.trim().toLowerCase() === slug.toLowerCase())
  return {
    props: {
      item: item ? item : {}
    }
  }
}

这一切看起来都很笨拙，所以我仍然想知道是否有更好的方法。

Answer 1

NextJS 路由区分大小写。您可以使用 getStaticPaths 中的回退属性来捕获与 getStaticPaths 中默认提供的路由大小写不同的路由。

编辑：我已经根据与 Dave 的讨论更新了答案。

我们可以给 fallback:true 或 fallback:"blocking" ，如果我们给 fallback:true 我们可以显示一个自定义组件，该组件将一直显示到页面加载的时间。对于 fallback:"blocking" 不返回新路径通过 getStaticPaths 将等待生成 HTML，

当我们给出 fallback:true 或“阻塞”静态页面时，用户第一次访问该站点时将生成该页面，并且生成的页面将被提供以供进一步访问。

示例代码

export async function getStaticPaths() {
  const idList = await fetchAllIds();
  const paths = [
  ];
  idList.forEach((id) => {paths.push(`/posts/${id}`)})
  return { paths, fallback: true };
}

我们需要注意的是我们在 getStaticProps 中的代码应该不区分大小写以获取数据，而不管 url 中提供的数据。

export async function getStaticProps({ params }) {
  const { slug } = params;

 try {
    /// This fetch api should be able to fetch the data irrespective of the case of the slug 
or we should convert it to the required case before passing it as a parameter to API
    const data= await fetchSlugDetails(slug);
//Same logic should be performed if you are getting data filtered based on slug from an existing array.
    return data? { props: { data} } : { notFound: true };
  } catch (error) {
    console.error(error);
    return { notFound: true };
  }

}

注意：如果你使用 fallback:true，你必须处理 notfound 情况和 fallback 情况。对于回退，您可以在静态生成页面时从 next/router 获取值 isFallback