При начальной загрузке страницы (и обновлении страницы) отображается неверный компонент с использованием React-Media и Next.js.

Question

Мне нужна помощь здесь. Я создаю портфолио для друга с помощью Next.js, и проблема, которую я пытаюсь устранить, заключается в начальной загрузке страницы индекса. В моей локальной / dev среде первая начальная загрузка страницы визуализирует компонент мобильного макета (см. Код ниже) за мгновение до того, как он визуализирует компонент рабочего стола (ошибка). Теперь, после развертывания приложения на хост-сервере с предоставленной ссылкой - https://chezportfolio-mdirmhphih.now.sh/ Страница загружает и поддерживает мобильную разметку, которая является неправильной. Раскладка себя исправляет после перехода на другие маршруты и обратно. Кроме того, я использую React-Media для рендеринга определенных компонентов на основе медиа-запросов. Я не совсем уверен, что вызывает проблему, но я предполагаю, что SSR-возможности Next.js плохо сочетаются с React-Media.

Ссылка на мой репозиторий приведена ниже, если вам нужно глубже погрузиться - Ссылка на репо

РЕДАКТИРОВАТЬ: Я все еще застрял в этой проблеме, и действительно не могу двигаться дальше, пока это не будет решено.

export default class Index extends Component {
      static async getInitialProps() {
        const options = {
          method: 'GET',
          mode: 'cors'
        };

        const resources = await fetch(CLOUDINARY('chez').URL, options);
        const imageData = await resources.json();

        return {
          imageData
        };
      }

          componentDidMount() {
            console.log(this.props);
          }

      render() {
        const { url, imageData } = this.props;

        const belowMaxWidth = () => {
          return (
            <Content maxWidth={300} margin={'120px auto'}>
              <Images imageData={imageData} width={300} />
            </Content>
          );
        };

        const aboveMaxWidth = () => {
          return (
            <Content>
              <Images imageData={imageData} width={200} />
            </Content>
          );
        };

        return (
          <Layout href={url.pathname}>
            <Media query="(max-width: 575px)" render={belowMaxWidth} />
            <Media query="(min-width: 574px)" render={aboveMaxWidth} />
          </Layout>
        );
      }
    }