使用NextJS进行动态子域路由

Question

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

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

上的网站

此外，如果用户拥有abc.com域，那么他可以将abc.com指向abc.xyz.com 因此，将来如果有人打开abc.com，则将投放abc.xyz.com。并且在URL中 还会显示abc.com。

我研究了NPM中的几个插件，例如vhost和通配符子域，但不确定解决此问题的正确方法。

vhost要求更改本地系统中的系统hosts，而通配符子域仅通过路由即可解决该问题。

我用临时代码自定义了 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记录。

Answer 1

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

我希望这会有所帮助！