Question

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

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

Answer 1

您应该能够在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组件的行为，如源代码here

在您的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中验证请求的来源，因此此属性将在所有容器（页面）中可用，因此您可以为应用程序使用相同的路由，并仅以不同的方式呈现数据。

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

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

Answer 2

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

https://github.com/tomsoderlund/nextjs-multi-domain-locale

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

2 个答案: