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() return 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 路由大小写 sensitive.You 可以在 getStaticPaths 中使用回退属性来捕获与 getStaticPaths 中默认提供的大小写不同的路由。

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

我们可以给 fallback:true 或 fallback:"blocking" ，如果我们给 fallback:true 我们可以显示一个自定义组件，该组件将显示到时间页面 loaded.For 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，则必须处理未找到的情况和后备情况。对于后备，您可以在静态生成页面时从 next/router 获取值 isFallback

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

NextJS case insensitive route for SSG pages

next.js

url-routing