Запуск веб-сайта, созданного с использованием «следующего экспорта», не вызовет getInitialProps () - PullRequest
Новая
       52

Запуск веб-сайта, созданного с использованием «следующего экспорта», не вызовет getInitialProps ()

0 голосов
/ 19 февраля 2020

В основном я экспортировал свое следующее приложение. js, используя next export. В итоге у меня есть набор файлов, которые я могу обслуживать с помощью обычного веб-сервера. Так что нет node.js и нет Рендеринг на стороне сервера.

Я поместил несколько console.log ("...") в getInitialProps () оба на _app.tsx и загруженной странице. Но браузер просто не показывает никаких выводов журнала, что означает, что методы getInitialProps () не запускаются.

Когда я запускаю страницу в разработке на своем локальном node.js, она отлично работает!

Мне нужен getInitialProps () для того, чтобы указать пространства имен, необходимые для next-i18next для загрузки переводов.

Это мой _app.tsx

import { LayoutedPage } from 'next';
import App from "next/app";
import StoreProvider from '@Stores/global';
import SiteLayout from '@Components/layouts/siteLayout';
import '/sass/main.scss';
import { appWithTranslation } from '../utils/i18n'

export type PageProps = {
  Component: LayoutedPage;
  pageProps: {};
}

class SpdwApp extends App<PageProps> {


  static async getInitialProps(appContext: any) {
    console.log("SpdwApp.getInitialProps");
    const appProps = await App.getInitialProps(appContext);

    return { ...appProps }
  }

  render(): React.ReactElement {        
    console.log("SpdwApp.render");

    const { Component, pageProps } = this.props;  

    const getLayout = Component.getLayout || ( (page: React.ReactElement): React.ReactElement => <SiteLayout>{page}</SiteLayout>);

    return (
      <StoreProvider>
        { getLayout(<Component {...pageProps} /> )}
      </StoreProvider>
    )
  }
}

export default appWithTranslation(SpdwApp)

Это страница, которую я загружаю: 

import { LayoutedPage } from 'next';
import Translate from '../../components/Translate';
import { I18nNamespacesRequired } from '../../utils/i18n';

const SimpleHourCalculation: LayoutedPage = () => {
  return(
    <div className="row border border bg-light rounded my-4 p-3">
      <div className="col-12">
        <h1>Simple Hour Calculation</h1>
        <p>Translation from the common translation bundle: <i><Translate tkey="ActionAbortedTitle"></Translate></i></p>
        <p>Translation from the simpleHourCalc translation bundle: <i><Translate tkey="simpleHourCalc:TranslationExample"></Translate></i></p>
      </div>
    </div>

  )
}

SimpleHourCalculation.getInitialProps = async (): Promise<I18nNamespacesRequired> => {  
  console.log("SimpleHourCalculation.getInitialProps");
  return {
    namespacesRequired: ['common', 'simpleHourCalc'],
  };
};

// eslint-disable-next-line react/display-name
SimpleHourCalculation.getLayout = ( (page: LayoutedPage): React.ReactElement => <div>{page}</div>);

export default SimpleHourCalculation;
...