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

您应该能够在pages/_app.jsx文件static getInitialProps(context)方法中验证这一点，并使用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>
    );
  }
}

请注意，我调用app.getInitialProps来模仿的源代码中的next/app组件行为

在您的pages/index.js您可以访问props.renderFrom并在那里显示数据。

// pages/index.js

import React from 'react'

const Home = props => (
  <div>
    Rendering content for domain: {props.renderFrom}
  </div>
)

export default Home

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

提示：您还可以使用next-routes来管理应用程序的路由，它比 out next 更好，并且在这里您有一个自定义服务器，您也可以在其中管理您的流量。

希望这对您有所帮助，并为您指明正确的方向。