Next.js：根据请求主机自定义渲染动态页面答案

【问题标题】：Next.js: Render dynamic pages customized based on requesting hostNext.js：根据请求主机自定义渲染动态页面
【发布时间】：2019-07-08 09:20:14
【问题描述】：

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

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

【问题讨论】：

标签： javascript express next.js

【解决方案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 来模仿源代码here 中的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 中验证请求来自何处，因此该属性将在您的所有容器（页面）中可用，因此您可以为您的应用程序使用相同的路由，而只是以不同的方式呈现数据。

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：