Next.js: рендеринг динамических страниц, настроенных на основе запроса хоста - PullRequest
Новая
       35

Next.js: рендеринг динамических страниц, настроенных на основе запроса хоста

0 голосов
/ 14 февраля 2019

Я хочу отображать динамические страницы next.js с пользовательским содержимым / стилем в зависимости от домена, который запрашивает страницу.В основном запускаю одно приложение next.js в нескольких доменах.

Я знаю, что мне нужно сделать какую-то особую маршрутизацию, но не знаю точно, как и как я могу передать информацию о хосте на запрошенную страницу,поэтому он выбирает совпадающие данные из базы данных.

1 Ответ

0 голосов
/ 14 февраля 2019

Вы можете проверить это в методе pages/_app.jsx file 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, это свойство будет доступно во всех ваших контейнерах (страницах), поэтому вы можетеиметь ту же самую маршрутизацию для вашего приложения и просто отображать данные по-разному.

Совет: вы также можете использовать next-routes для управления маршрутизацией для приложения, это лучше, чем в следующем разделе, и здесь у вас естьпользовательский сервер, на котором вы также можете управлять своим трафиком.

Надеюсь, это поможет вам и укажет правильное направление.

...