NextJs 中单页的多条路由答案

【问题标题】：Multiple routes from single page in NextJsNextJs 中单页的多条路由
【发布时间】：2021-04-16 20:55:00
【问题描述】：

我正在为我的公司建立一个营销/消费者网站，从 WordPress（感谢上帝）迁移到 Next 和 Prismic 的组合。目前，我们的消费者网站有大约 600 个页面，用于为我们 35 多个经销商中的每个经销商提供多个产品和登录页面，但我希望不再管理 600 个页面的内容，因为所有经销商都共享页面和内容；页面数量的唯一作用是允许我们增强 SEO 和 url 路径，以便每个产品页面都是经销商的子页面，即san-diego-ca/product-pagesacramento-ca/product-page。希望这是足够的信息来澄清我更广泛的问题。

我正在使用SSR 和getServerSideProps，我希望能够拥有相同类型的 URL 结构，每个经销商都有自己的具有特定 url 路径的页面，但他们不需要拥有自己的页面内容。它们都共享相同的东西。我在 Prismic 中有一个名为 /interior-doors 的页面。使用 Next 有没有办法允许从 mysite.com/interior-doors 和 mysite.com/sacramento-ca/interior-doors 访问 /interior-doors 页面，而不需要有 2 个单独的页面？

提前致谢，我可以根据需要添加尽可能多的代码或详细信息。

【问题讨论】：

标签： reactjs next.js prismic.io next-router

【解决方案1】：

您可以将Next.js rewries 用于此类别名。

你的内容策略可能比我从最初的描述中读出的要多，但一般来说，600 页的重复内容听起来不像你在帮助互联网，搜索引擎爬虫可能会在某个时候得到它也是。

【讨论】：

谢谢。听起来不像我所需要的，但我认为你在正确的轨道上。我的内容策略要如何改进才能让这一切变得更简单？
我认为自己在 SEO 和内容策略方面不太胜任，因此需要了解您的详细用例。经验法则是内容重复是不好的；也许像 <link> 标签和 canonical 这样的东西可以帮助您或首先考虑使内容多样化。

【解决方案2】：

看看 Next 的重定向：https://nextjs.org/docs/api-reference/next.config.js/redirects

您可以指定，包括动态路由，哪些路由应该被“重定向”到哪里，如下所示：

module.exports = {
  async redirects() {
    return [
      {
        source: '/:dealer/:product',
        destination: '/:product'
        permanent: false,
      }
    ]
  }
}

这会导致访问 /sacramento-ca/interior-doors 以重定向到 /interior-doors 等。这可能不适合您的确切用例，因此请查看文档了解更多详细信息。

【讨论】：

【解决方案3】：

您实际上应该能够使用dynamic routes 完成此操作。对于 URL 结构的多个深度使用相同文档的用例，optional catch-all routes 可能最有意义。然后，您可以将所需的任何内容作为查询传递，然后将其传递给内容，例如：

interior-doors/[[...slug]].js

将匹配：/interior-doors, /interior-doors/sacramento-ca, /post/sacramento-ca/interior-doors

然后您可以访问查询并根据需要在您的内容中使用这些参数，这样您就可以实际提取城市名称并将其用于标题或副本中。

【讨论】：

这基本上就是我最终所做的，而且效果很好。