来自 NextJs 中单个页面的多个路由

Question

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

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

在此先感谢，我可以根据需要添加尽可能多的代码或详细信息。

Answer 1

您可以使用 Next.js rewries 作为此类别名。

你的内容策略可能比我从最初的描述中读到的要多，但一般来说，跨 600 页的重复内容听起来不像是在帮互联网的忙，搜索引擎抓取工具可能会在还有一点。

Answer 2

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

您可以指定（包括动态路由）哪些路由应该 'redirected' 到哪里，如下所示：

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

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

Answer 3

您实际上应该能够完成此操作 dynamic routes. For your use case of having multiple depths of the URL structure use the same document, optional catch-all routes 可能最有意义。然后您可以将您需要的任何内容作为查询传递，然后将其传递给内容，例如：

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

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

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

来自 NextJs 中单个页面的多个路由

Multiple routes from single page in NextJs

reactjs

next.js

prismic.io

next-router