带有 NextJS 10 问题的区分大小写的 URL答案

【问题标题】：Case sensitive URL's with NextJS 10 problem带有 NextJS 10 问题的区分大小写的 URL
【发布时间】：2021-01-17 16:09:08
【问题描述】：

在 NextJS 的最新版本中，路由器已区分大小写。我一直在用 NextJS 慢慢地重写我们的会议网站，我注意到我们的大部分有价值的 SEO 都被 google 和其他人存储为 cased，并且会导致 404。

例如，通过谷歌搜索“Douglas Crockford Silicon Valley Code Camp”可以找到此 URL。

https://www.siliconvalley-codecamp.com/Session/2018/qa-with-douglas-crockford

NextJS 有没有办法在生产中运行时以某种方式小写所有传入的 URL，即使是某种重定向？

我遵循他们在这里的模式：https://nextjs.org/docs/routing/dynamic-routes 并且我的应用正在使用 GetStaticPaths，因为我计划使用 ISR（增量静态再生），所以它也需要使用它。

此外，由于该网站一直不区分大小写，因此 URL 以各种方式存储，因此我不能只使用 Google 存储它的方式。

【问题讨论】：

我遇到的真正问题是我有像siliconvalley-codecamp.com/Session/2018/… 这样的URL，需要小写。我最终通过创建第二个 docker 容器作为代理解决了这个问题，然后将通过代理的所有内容更新为小写。我发现没有办法用 NextJS 做到这一点

标签： reactjs next.js

【解决方案1】：

我假设你有类似的东西：/articles/:slug。如果 slug 有任何大写字母，我会使用路由器获取 slug，然后在挂载时创建一个挂钩以重定向到“/articles/:lowercaseSlug”。

import { useRouter } from 'next/router'
const router = useRouter;
const { slug } = router.query;

useEffect(() => {
    if (slug.toLowerCase() !== slug) // Check if it has any capital letters
        router.push(`/articles/${slug.toLowerCase()}`) // Redirect to the working path
}, [])

【讨论】：

谢谢@Mihai，我稍后再试试。听起来正是我的动态路线所需要的。但是，像 /pages/about.js 这样我希望 /About 和 /about 工作相同的非动态路由呢？
在这种情况下，我会从这里使用下一个 js 重定向：nextjs.org/docs/api-reference/next.config.js/redirects 其中源是“/About”，目标是“/about”