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

В основном я экспортировал свое приложение next.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;

0 ответов

Другие вопросы по тегам