Блог

Главная - Вопросы по программированию - NextJS: ошибка типа: не удается прочитать заголовки свойств неопределенного

NextJS: ошибка типа: не удается прочитать заголовки свойств неопределенного

#node.js #reactjs #request #next.js #server-side-rendering

#node.js #reactjs #запрос #next.js #рендеринг на стороне сервера

Вопрос:

Я получаю эту ошибку в getInitialProps функции, прикрепленной к моей странице:

 const getInitialProps = async ({ req, query }: NextPageContext) => {
  let isValidReferenceQuery = true;

  const { path } = absoluteUrl(req as IncomingMessage);
  try {
    await policyService.getPolicyByReference(
      path,
      query.referenceQuery as string
    );
  } catch (error) {
    isValidReferenceQuery = false;
  }

  return {
    referenceQuery: (query.referenceQuery as string) ?? null,
    isValidReferenceQuery,
  };
};

Page.getInitialProps = getInitialProps;

Функция absoluteUrl определяет, был ли вызов API выполнен на стороне сервера или на стороне клиента, и соответствующим образом корректирует путь:

 export default function absoluteUrl(
  req: IncomingMessage
): Record<string, string> {
  const protocol = req.headers.referer?.split('//')[0] ?? 'http:';
  const host = req
    ? req.headers['x-forwarded-host'] || req.headers.host
    : window.location.host;
  const path =
    host === 'localhost:3000'
      ? `${protocol}//localhost:8080`
      : `${protocol}//${host}${axios.defaults.baseURL}`;
  return {
    path,
  };
}

Я обновил свой _document.tsx amp; _app.tsx , чтобы включить getInitialProps , как описано, чтобы отказаться от автоматической статической генерации в режиме разработки, поэтому req это должно быть определено. Нам также нужно, чтобы все страницы были SSR для локализации:

 import React from 'react';
import App, { AppContext } from 'next/app';
import { ReactQueryCacheProvider, QueryCache } from 'react-query';
import { Hydrate } from 'react-query/hydration';
import { appWithTranslation } from '@/localisation/i18n';
import { AppPageProps } from '@/models/page';

const TextMiningApp = ({ Component, pageProps }: AppPageProps) => {
  const queryCache = new QueryCache();
  const Layout = Component.Layout ? Component.Layout : React.Fragment;

  return (
    <ReactQueryCacheProvider queryCache={queryCache}>
      <Hydrate state={pageProps.dehydratedState}>
          <Layout>
            {/* eslint-disable-next-line react/jsx-props-no-spreading */}
            <Component {...pageProps} />
          </Layout>
      </Hydrate>
    </ReactQueryCacheProvider>
  );
};

TextMiningApp.getInitialProps = async (appContext: AppContext) => ({
  ...(await App.getInitialProps(appContext)),
});

export default appWithTranslation(TextMiningApp);

Я не могу понять, почему, если я отказался от автоматической статической генерации, req не определен?

Метки: