NextJS 的动态子域路由答案

【问题标题】：Dynamic Subdomain Routing With NextJSNextJS 的动态子域路由
【发布时间】：2020-10-16 19:45:44
【问题描述】：

如何在 NextJS 中实现动态子域路由功能？

示例：如果用户在站点xyz 中使用用户名abc，那么他可以访问他的网站abc.xyz.com

另外，如果用户有abc.com 域，那么他可以将abc.com 指向abc.xyz.com 因此，将来如果有人打开abc.com，则提供abc.xyz.com。在网址中还显示了abc.com。

我调查了 NPM 中的几个插件，例如 vhost 和 wildcard-subdomains，但不确定这是解决此问题的正确方法。

vhost 需要在本地系统中更改系统 hosts，而 wildcard-subdomain 纯粹通过路由解决了这个问题。

本地系统设置我已经自定义了 Server.js 代码可以暂时工作，但似乎不是可以在生产中使用的解决方案：

Server.js

  ...
    if (pathname === "/demo.demo.com") {
          app.render(req, res, "/demo.demo.com", query);
    }
    ...

而在 _app.js

static async getInitialProps(appArgument) {
   ...
    return {
      ...
      renderFrom: "demo.demo.com"
    };
  }

在我的主机中，demo.demo.com 指向localhost。

该网站在demo.demo.com:3000 中为我工作，但如何在生产场景中推广它使用数据库和CNAME 记录并通过用户操作自动添加/更改 CNAME 记录。

【问题讨论】：

我不明白 next.js 是如何与自动更改或添加 CNAME 记录相关的。
要执行上述解决方案，我们需要将主机添加到本地系统。相当于 Internet 中本地系统中的主机是 CNAME 记录。
是的，我知道，但是 next.js 并不打算做这样的事情
@Nico：你指的是动态子域路由不能用 NextJS 完成，因为我在我的应用程序中使用 NextJS，这是要求。该解决方案有效，但如何使其与 DB 和 Server Properly 通用。

标签： subdomain next.js wildcard-subdomain dynamic-routing

【解决方案1】：

在Vercel（Next.js 的创建者）上，我们开箱即用地支持Wildcard Domains。在 Next.js 中，您只需从传入请求的标头中读取域，对其进行解析，然后以正确的内容进行响应。

希望对你有帮助！

【讨论】：

没有其他办法吗？我正在编写自定义服务器。

【解决方案2】：

我刚找到这篇博文https://demo.vercel.pub/platforms-starter-kit，它是6天前发布的。

它发布了https://platformize.co/，这是一款可以做到这一点的产品。

多租户应用程序通过一个统一的代码库为不同子域/自定义域的多个客户提供服务。

例如，这个博客是一个多租户应用程序：

子域：demo.vercel.pub

自定义域：platformize.co（映射到 demo.vercel.pub）

构建您自己的：app.vercel.pub

另一个例子是 Hashnode，一个流行的博客平台。每个作者的博客都有自己独特的 .hashnode.dev 子域：

eda.hashnode.dev

katycodesstuff.hashnode.dev

pit.hashnode.dev

用户还可以将自定义域映射到他们的 .hashnode.dev 子域：

catalins.tech → pit.hashnode.dev

【讨论】：