rewrite including antd css in nextjs app so works with upgraded rspack; upgrade antd

Author: williamstein

src/packages/frontend/package.json

@@ -71,7 +71,7 @@
     "@xterm/addon-webgl": "^0.18.0",
     "@xterm/xterm": "^5.5.0",
     "anser": "^2.1.1",
-    "antd": "^5.24.7",
+    "antd": "^5.27.0",
     "antd-img-crop": "^4.21.0",
     "async": "^2.6.3",
     "audio-extensions": "^0.0.0",

src/packages/next/package.json

@@ -57,6 +57,7 @@
   "homepage": "https://github.com/sagemathinc/cocalc/tree/master/src/packages/next",
   "private": false,
   "dependencies": {
+    "@ant-design/cssinjs": "^1.24.0",
     "@ant-design/icons": "^6.0.0",
     "@ant-design/v5-patch-for-react-19": "^1.0.3",
     "@cocalc/backend": "workspace:*",
@@ -67,7 +68,7 @@
     "@cocalc/util": "workspace:*",
     "@openapitools/openapi-generator-cli": "^2.19.1",
     "@vscode/vscode-languagedetection": "^1.0.22",
-    "antd": "^5.24.7",
+    "antd": "^5.27.0",
     "antd-img-crop": "^4.21.0",
     "awaiting": "^3.0.0",
     "base-64": "^1.0.0",
@@ -95,7 +96,6 @@
     "zod": "^3.23.5"
   },
   "devDependencies": {
-    "@ant-design/cssinjs": "^1.23.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@types/express": "^4.17.21",

src/packages/next/pages/_document.tsx

@@ -1,72 +1,50 @@
-/*
-This custom document is needed to workaround this bug in antd + nextjs:
-
-    https://github.com/ant-design/ant-design/issues/38767
-
-The actual fix -- i.e., this entire file -- comes from
-
-    https://github.com/ant-design/ant-design/issues/38767#issuecomment-1350362026
-
-which is for a different bug in antd + nextjs, but it happens to fix
-the same problem, and fortunately also works with the older nextjs 12.x, which
-we are currently stuck with.
-
-See also the discussion at https://github.com/ant-design/ant-design/issues/39891
-*/
-
+// pages/_document.tsx
 import type { DocumentContext, DocumentInitialProps } from "next/document";
 import Document, { Head, Html, Main, NextScript } from "next/document";
-
 import { createCache, extractStyle, StyleProvider } from "@ant-design/cssinjs";
-
 import { Locale } from "@cocalc/util/i18n";
-
 import { query2locale } from "locales/misc";
 
-export default class MyDocument extends Document {
-  static async getInitialProps(ctx: DocumentContext): Promise<
-    DocumentInitialProps & {
-      locale: Locale;
-    }
-  > {
+export default class MyDocument extends Document<{ locale: Locale }> {
+  static async getInitialProps(
+    ctx: DocumentContext,
+  ): Promise<DocumentInitialProps & { locale: Locale }> {
     const locale = query2locale(ctx.query);
-
     const cache = createCache();
     const originalRenderPage = ctx.renderPage;
 
-    // The IntlProvider is only for english and all components with translations in the frontend
     ctx.renderPage = () =>
       originalRenderPage({
-        enhanceApp: (App) => (props) =>
-          (
-            <StyleProvider cache={cache}>
-              <App {...props} {...{ locale }} />
-            </StyleProvider>
-          ),
+        enhanceApp: (App: any) => (props: any) => (
+          <StyleProvider cache={cache} hashPriority="high">
+            <App {...props} locale={locale} />
+          </StyleProvider>
+        ),
       });
 
     const initialProps = await Document.getInitialProps(ctx);
 
+    // inline critical AntD CSS as real <style> tags (no script hack)
+    const css = extractStyle(cache, { plain: true, types: ["style", "token"] });
+
     return {
       ...initialProps,
       locale,
       styles: (
         <>
           {initialProps.styles}
-          {/* This is hack, `extractStyle` does not currently support returning JSX or related data. */}
-          <script
-            dangerouslySetInnerHTML={{
-              __html: `</script>${extractStyle(cache)}<script>`,
-            }}
+          <style
+            // keep it obvious for debugging
+            data-antd="cssinjs-ssr"
+            // extractStyle returns complete <style> tags; that’s OK here
+            // If you prefer only the CSS text, you can parse it, but this works well in practice.
+            dangerouslySetInnerHTML={{ __html: css }}
           />
         </>
       ),
     };
   }
 
-  // TODO: this "lang={...}" is only working for the very first page that's being loaded
-  // next's dynamic page updates to not have an impact on this. So, to really fix this, we
-  // probably have to get rid of this _document customization and update to version 15 properly.
   render() {
     return (
       <Html lang={this.props.locale}>