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

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组件行为

在您的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 更好，并且在这里您有一个自定义服务器，您也可以在其中管理您的流量。

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

Answer 2

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

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