Next.js:根据请求主机自定义渲染动态页面 [英] Next.js: Render dynamic pages customized based on requesting host

问题描述

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

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

解决方案

您应该能够在您的 pages/_app.jsx 文件中验证这一点 static getInitialProps(context) 方法并使用 context 来验证请求来自哪里，然后向组件返回一个标志.

例子:

//pages/_app.js从下一个/应用程序"导入应用程序；导出默认类 MyApp 扩展应用程序 {静态 getInitialProps({ 组件，路由器，ctx }) {让 pageProps = app.getInitialProps({ 组件, 路由器, ctx });if (ctx.req.headers.host.match(/localhost/)) {pageProps = {...页面道具，renderFrom: 'mydomain',}}返回 { pageProps };}使成为() {const { 组件，pageProps } = this.props;返回 (<section id="app"><组件 {...pageProps}/></部分>);}}

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

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

//pages/index.js从反应"导入反应const Home = props =>(
为域渲染内容:{props.renderFrom}</div>)导出默认主页

由于您在 _app.js 中验证请求的来源，因此该属性将在您的所有容器(页面)中可用，因此您可以为您的应用程序使用相同的路由并仅呈现数据不同.

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

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

I want to render dynamic next.js pages with custom content / style based on the domain which requests the page. Basically run one next.js app under multiple domains.

I know that I have to do some sort of custom routing, but don't know exactly how and how I can pass the host information to the requested page, so it fetches the matching data from a database.

解决方案

You should be able to verify this in your pages/_app.jsx file static getInitialProps(context) method and use the context to verify where the request is coming from then return a flag to the component.

Example:

// 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>
    );
  }
}

Note that I call app.getInitialProps to mimic the next/app component behaviour as in the source code here

In your pages/index.js you will have access to props.renderFrom and there you can display data.

// pages/index.js

import React from 'react'

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

export default Home

Since you're verifying where the request comes from in _app.js this property will be available in all your containers (pages) so you can have the same routing for your application and just render data differently.

Tip: You could also use next-routes to manage the routing for the application, it's better than the out next comes with, and in here you have a custom server where you can manage your traffic as well.

Hopefully this helps you and points you in the right direction.

这篇关于Next.js:根据请求主机自定义渲染动态页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！