CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutSign UpSign In
sagemathinc

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place.

GitHub Repository: sagemathinc/cocalc
 Path: blob/master/src/packages/next/pages/_document.tsx
Views: 687
1
/*

2
This custom document is needed to workaround this bug in antd + nextjs:

3


4
    https://github.com/ant-design/ant-design/issues/38767

5


6
The actual fix -- i.e., this entire file -- comes from

7


8
    https://github.com/ant-design/ant-design/issues/38767#issuecomment-1350362026

9


10
which is for a different bug in antd + nextjs, but it happens to fix

11
the same problem, and fortunately also works with the older nextjs 12.x, which

12
we are currently stuck with.

13


14
See also the discussion at https://github.com/ant-design/ant-design/issues/39891

15
*/

16


17
import type { DocumentContext, DocumentInitialProps } from "next/document";

18
import Document, { Html, Head, Main, NextScript } from "next/document";

19
import { createCache, extractStyle, StyleProvider } from "@ant-design/cssinjs";

20


21
export default class MyDocument extends Document {

22
  static async getInitialProps(

23
    ctx: DocumentContext

24
  ): Promise<DocumentInitialProps> {

25
    const cache = createCache();

26
    const originalRenderPage = ctx.renderPage;

27


28
    ctx.renderPage = () =>

29
      originalRenderPage({

30
        enhanceApp: (App) => (props) =>

31
          (

32
            <StyleProvider cache={cache}>

33
              <App {...props} />

34
            </StyleProvider>

35
          ),

36
      });

37


38
    const initialProps = await Document.getInitialProps(ctx);

39


40
    return {

41
      ...initialProps,

42
      styles: (

43
        <>

44
          {initialProps.styles}

45
          {/* This is hack, `extractStyle` does not currently support returning JSX or related data. */}

46
          <script

47
            dangerouslySetInnerHTML={{

48
              __html: `</script>${extractStyle(cache)}<script>`,

49
            }}

50
          />

51
        </>

52
      ),

53
    };

54
  }

55
  render() {

56
    return (

57
      <Html>

58
        <Head />

59
        <body>

60
          <Main />

61
          <NextScript />

62
        </body>

63
      </Html>

64
    );

65
  }

66
}

67


68