pages/_app.tsx

import "../public/font/stylesheet.css";
import "../styles/iframeLoaderScreen.css";
import "../styles/loaders.css";
import "../styles/globals.css";
import "../styles/customlib/_customTabs.css";
import "../styles/customlib/_customMonacoEditor.css";
import "allotment/dist/style.css";
import "nprogress/nprogress.css";

import React, { useEffect } from "react";
import { Provider } from "react-redux";
import App from "next/app";
import type { AppContext, AppProps } from "next/app";
import Script from "next/script";
import { getIronSession, IronSessionData } from "iron-session";
import Router from "next/router";
import NProgress from "nprogress";
import { ApolloProvider } from "@apollo/client";

import { createApolloClient } from "../utils/client";
import { store } from "../store/store";

interface MyAppProps extends AppProps {
  initialUser?: IronSessionData["user"] | null;
}

function MyApp({ Component, pageProps, router, initialUser }: MyAppProps) {
  Router.events.on("routeChangeStart", () => NProgress.start());
  Router.events.on("routeChangeComplete", () => NProgress.done());
  Router.events.on("routeChangeError", () => NProgress.done());

  return (
    <>
      <ApolloProvider client={createApolloClient()}>
        <Provider store={store}>
          <Component {...pageProps} />
        </Provider>
      </ApolloProvider>
    </>
  );
}

export default MyApp;

MyApp.getInitialProps = async (appContext: AppContext) => {
  const appProps = await App.getInitialProps(appContext);

  return appProps;
};