将 Vercel/Nextjs 项目安装为不同 Vercel/Nextjs 项目的子目录时出现问题

Answer 1

rewrite 与 redirect

我们先来了解一下这个区别。

rewrite 是仅在服务器上发生的事情。服务器将重写已请求的 URL 并搜索该重写 URL 的内容。客户对此一无所知。例如。如果 /a.html 被重写为 /b.html，客户端将在两个 URL 上收到相同的内容。客户端不知道是否有两次相同的文件，或者是否一个（或两个）请求已被重写到其他资源。

另一方面，redirect 涉及客户端（即浏览器）。如果要求服务器提供应重定向的 URL，它将使用重写的目标 URL 回复客户端/浏览器。然后，客户端将发送新 URL 的另一个请求，并通过更改导航栏中的地址使最终用户可以看到它。如果 /a.html 被重定向到 /b.html，客户端在请求 a.html 时将不会收到 b.html 的实际内容，但浏览器会将地址更新为 b.html 并发送新的请求。

在您的情况下，重写有什么问题？

HTML 包含对使用绝对路径的其他资源的引用，例如就像是：

<script src="/_next/static/..."></script>

如果此文件应作为docs.example.com 和example.com/docs 提供（例如使用重写），实际的HTML 不会改变。浏览器将因此尝试分别访问docs.example.com/_next/static/... 或example.com/_next/static/...。这适用于第一种情况（docs.example.com），但不适用于第二种情况。你已经注意到了。

您可以更改下一个的basePath，例如到/docs。然后 HTML 将包含<script src="/docs/_next/...">。这将使浏览器分别请求docs.example.com/docs/_next/... 或example.com/docs/_next/...。这适用于第二种情况，但不适用于第一种情况。您可以使用更多的重写规则来治愈第一种情况，但我建议使用 KISS 解决方案。

怎么办？

如 cmets 中所述，将完全相同的内容放在两个不同的地址不是好的做法。你可以看到，这也导致了后续的困难。 （更不用说搜索引擎对重复内容的惩罚了。）

一个好的解决方案是决定在哪里存储内容。那应该是docs.example.com 或example.com/docs，而不是两者。

使用 docs.example.com，将 example.com/docs/ 转发到 docs.example.com

我建议（并在本节中假设）采用docs.example.com 明确分离关注点。

因此，在 Vercel 中，您将设置两个项目。一个用于您的“主要”下一个实例，另一个用于“文档”下一个实例。 （两者都可以来自同一个仓库，没关系。）

然后，您将域分配给两个项目，例如www.example.com 到“主”项目，docs.example.com 到“文档”项目。 example.com 和 docs.example.com 现在应该可以工作了。 example.com/docs/ 应该会产生 404 错误。

然后通过添加vercel.json 为您的“主”项目添加重定向（而不是重写！），如下所示：

{
  "redirects": [
    { "source": "/docs/:path*", "destination": "https://docs.example.com/:path*" }
  ]
}

现在，如果您在浏览器中输入example.com/docs/foo，您应该会被重定向到docs.example.com/foo，并且页面应该可以正常加载。

仅使用 example.com/docs/

如果您决定仅将文档内容放在example.com/docs/，则解决方案如下：

• 将basePath: '/docs' 添加到文档下一个项目的next.config.js。不要向这个 vercel 项目添加域。
• 在“main”下一个项目中添加vercel.json，重写如下：

{
  "rewrites": [
    { "source": "/docs", "destination": "https://$domain-of-docs-project.vercel.app/docs" },
    { "source": "/docs/:path*", "destination": "https://$domain-of-docs-project.vercel.app/docs/:path*" }
  ]
}

如果您有其他问题或这不能解决问题，请发表评论。

Answer 2

我认为你可以使用vercel.json像这样：

{
  "rewrites": [
    {
      "source": "/:path*",
      "has": [
        {
          "type": "host",
          "value": "docs.example.com"
        }
      ],
      "destination": "/docs/:path*"
    }
  ]
}

Answer 3

接下来提供了一个具体的例子。

您的“网络”项目应该处理重写，如 here 所示。 next.config.js：

const { DOCS_URL } = process.env //this should be the vercel URL NOT docs.example.com

/** @type {import('next').NextConfig} */
module.exports = {
  async rewrites() {
    return [
      {
        source: '/:path*',
        destination: `/:path*`,
      },
      {
        source: '/docs',
        destination: `${DOCS_URL}/docs`,
      },
      {
        source: '/blog/:path*',
        destination: `${BLOG_URL}/docs/:path*`,
      },
    ]
  },
}

您的“文档”应用程序需要设置一个基本路径，如 here 所示。 next.config.js：

    module.exports = {
      basePath: '/docs',
    }

然后，为了确保 docs.example.com 不再为文档提供服务，我只需删除 DNS 记录。相反，您将只有一个 vercel URL，您将在“web”中的重写中使用它。无需从 docs.example.com 指向该服务器。

Nextjs documentation for multi-zone

Nextjs example with multi-zones