NextJS production CSS build

Generally, after build we push all CSS and JS chunks into a static folder so that when server ask for the requested page Next Js serve it from that static folder (depending on the request).

Server.js :

const staticDir = path.resolve(__dirname, "..", ".next/static");
server.use(compression());
server.use("/_next/static", express.static(staticDir));



    server.get("/_next/*", (req, res) => {
      /* serving _next static content using next.js handler */
      handle(req, res);
    });
    server.get("/static/*", (req, res) => {
      /* serving _next static content using next.js handler */
      handle(req, res);
    });

Add below lines in your _document.js file and please share the configuration you added in next.config.js.

_document.js

// Render app and page and get the context of the page with collected side effects.

  const sheets = new ServerStyleSheets();
  const originalRenderPage = ctx.renderPage;

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: App => props => sheets.collect(<App {...props} />)
    });

  const initialProps = await Document.getInitialProps(ctx);

  return {
    ...initialProps,
    // Styles fragment is rendered after the app and page rendering finish.
    styles: [
      ...React.Children.toArray(initialProps.styles),
      sheets.getStyleElement()
    ]
  };
};