2

I have a next js project that is created by create next app and modified _app.ts to this

import "../../public/assets/css/bootstrap.css";
import "antd/dist/antd.css";
import "../../public/assets/css/common.css";
import "../styles/globals.css";
import "../styles/builderGlobals.css";
import "../../public/assets/css/quiz.css";
import "../../public/assets/css/main.css";
import "../../public/assets/css/responsive.css";
import Head from "next/head";
import { wrapper } from "../app/store";
import { setUser } from "../Modules/Auth/authSlice";
import Layout from "../components/Layouts/layout";
import type { AppPropsWithLayout } from "../utils/types";
import { setNotifSettingsData } from "../Modules/Notifications/notificationsSlice";
import serverApi from "../utils/axios/serverApi";
import NextNProgress from "nextjs-progressbar";
import { useAppSelector } from "../app/hooks";

const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {

  const favicon = useAppSelector(state => state.settingsData.favico_icon);

  const getLayout =
    Component.getLayout ??
    ((page) => (
      <Layout>
        <Head>
          <link rel="shortcut icon" href={favicon || "/img/favicon.png"} />
        </Head>
        <NextNProgress /> {page}
      </Layout>
    ));
  return getLayout(<Component {...pageProps} />);
};

MyApp.getInitialProps = wrapper.getInitialAppProps(
  (store) =>
    async ({ Component, ctx }) => {
      if (!ctx.req) {
        return {
          pageProps: {
            ...(Component.getInitialProps
              ? await Component.getInitialProps({ ...ctx, store })
              : {}),
            pathname: ctx.pathname,
          },
        };
      }

      try {
        const { data: initialData } = await serverApi(
          ctx,
          `/settings/get-initial-site-data`
        );

        store.dispatch(setUser(initialData?.authUser));
        store.dispatch(setNotifSettingsData(initialData?.siteSettings));
        return {
          pageProps: {
            ...(Component.getInitialProps
              ? await Component.getInitialProps({ ...ctx, store })
              : {}),
            pathname: ctx.pathname,
          },
        };
      } catch (error) {
        ctx.res.statusCode = 404;
        ctx.res.end("Not found");
        return;
      }
    }
);

export default wrapper.withRedux(MyApp);

But after running yarn build it created too large _app chunk. about 431kb That is huge. How can I reduce this chunk? or am I doing anything wrong?

https://github.com/sakib412/sakib412/raw/main/WhatsApp%20Image%202022-10-13%20at%206.48.08%20PM.jpeg

Najmus Sakib
  • 447
  • 5
  • 14
  • 1
    I'd recommend trying the suggestions mentioned in [First Load JS shared by all is rather heavy in next.js](https://stackoverflow.com/questions/65453801/first-load-js-shared-by-all-is-rather-heavy-in-next-js). – juliomalves Oct 15 '22 at 21:20

0 Answers0