В Next.js метод getInitialProps используется для получения данных на стороне сервера перед отрисовкой страницы. Однако, начиная с Next.js 9.3, метод getInitialProps устарел в пользу других методов получения данных, таких как getStaticProps и getServerSideProps.

Чтобы добиться функциональности, аналогичной getInitialProps, с использованием компонента высшего порядка (HOC) в Next.js, вы можете создать собственный HOC, который обертывает ваш компонент и обрабатывает логику выборки данных. Вот пример:

// withDataFetching.js
import React from 'react';
const withDataFetching = (getData) => (WrappedComponent) => {
  return class extends React.Component {
    static async getInitialProps(ctx) {
      const data = await getData();
      return { data };
    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};
export default withDataFetching;

В приведенном выше коде HOC withDataFetchingпринимает функцию getDataв качестве аргумента. Эта функция отвечает за получение необходимых вам данных. Затем HOC оборачивает предоставленный компонент и передает полученные данные в качестве свойства.

Чтобы использовать HOC с компонентом, вы можете сделать следующее:

import React from 'react';
import withDataFetching from './withDataFetching';
const MyComponent = ({ data }) => {
  // Use the fetched data here
  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};
const getData = async () => {
  // Fetch data here
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
};
export default withDataFetching(getData)(MyComponent);

В приведенном выше примере MyComponentобернут HOC withDataFetching, передавая функцию getDataв качестве аргумента. Полученные данные будут доступны в свойстве dataMyComponent.