Javascript Next.js：呈现基于请求主机定制的动态页面

我想根据请求页面的域，使用自定义内容/样式呈现dynamic next.js页面。 基本上在多个域下运行一个next.js应用程序

---

我知道我必须进行某种自定义路由，但不知道如何以及如何将主机信息传递到请求的页面，因此它会从数据库中获取匹配的数据。

您应该能够在

页面/u app.jsx

文件

静态getInitialProps（上下文）中验证这一点

方法，并使用

上下文

验证请求来自何处，然后向组件返回标志

例如：

// pages/_app.js

import app from 'next/app';

export default class MyApp extends app {
  static getInitialProps({ Component, router, ctx }) {
    let pageProps = app.getInitialProps({ Component, router, ctx });

    if (ctx.req.headers.host.match(/localhost/)) {
      pageProps = {
        ...pageProps,
        renderFrom: 'mydomain',
      }
    }

    return { pageProps };
  }

  render() {
    const { Component, pageProps } = this.props;
    return (
      <section id="app">
        <Component {...pageProps} />
      </section>
    );
  }
}

由于您要在

\u app.js

中验证请求来自何处，因此此属性将在您的所有容器（页面）中可用，因此您可以对应用程序使用相同的路由，并以不同的方式呈现数据

提示：您还可以使用

next routes

来管理应用程序的路由，它比outnext好，在这里您有一个自定义服务器，您也可以在其中管理流量

---

希望这能帮助您并为您指明正确的方向。

您应该能够在

页面/\u app.jsx

文件

static getInitialProps（context）

方法中验证这一点，并使用

上下文

验证请求来自何处，然后向组件返回一个标志

例如：

// pages/_app.js

import app from 'next/app';

export default class MyApp extends app {
  static getInitialProps({ Component, router, ctx }) {
    let pageProps = app.getInitialProps({ Component, router, ctx });

    if (ctx.req.headers.host.match(/localhost/)) {
      pageProps = {
        ...pageProps,
        renderFrom: 'mydomain',
      }
    }

    return { pageProps };
  }

  render() {
    const { Component, pageProps } = this.props;
    return (
      <section id="app">
        <Component {...pageProps} />
      </section>
    );
  }
}

由于您要在

\u app.js

中验证请求来自何处，因此此属性将在您的所有容器（页面）中可用，因此您可以对应用程序使用相同的路由，并以不同的方式呈现数据

提示：您还可以使用

next routes

来管理应用程序的路由，它比outnext好，在这里您有一个自定义服务器，您也可以在其中管理流量

---

希望这能帮助您并为您指明正确的方向。

下面是一个在同一个Next.js站点上托管多个域的示例（同时维护多种语言和静态站点生成/SSG），使用Next.js'i18n系统：

---

下面是一个示例，使用Next.js的i18n系统在同一个Next.js站点上托管多个域（同时维护多语言和静态站点生成/SSG）：