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