Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
sagemathinc
GitHub Repository: sagemathinc/cocalc
 Path: blob/master/src/packages/next/pages/_document.tsx
1447 views
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, { Head, Html, Main, NextScript } from "next/document";

19


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

21


22
import { Locale } from "@cocalc/util/i18n";

23


24
import { query2locale } from "locales/misc";

25


26
export default class MyDocument extends Document {

27
  static async getInitialProps(ctx: DocumentContext): Promise<

28
    DocumentInitialProps & {

29
      locale: Locale;

30
    }

31
  > {

32
    const locale = query2locale(ctx.query);

33


34
    const cache = createCache();

35
    const originalRenderPage = ctx.renderPage;

36


37
    // The IntlProvider is only for english and all components with translations in the frontend

38
    ctx.renderPage = () =>

39
      originalRenderPage({

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

41
          (

42
            <StyleProvider cache={cache}>

43
              <App {...props} {...{ locale }} />

44
            </StyleProvider>

45
          ),

46
      });

47


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

49


50
    return {

51
      ...initialProps,

52
      locale,

53
      styles: (

54
        <>

55
          {initialProps.styles}

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

57
          <script

58
            dangerouslySetInnerHTML={{

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

60
            }}

61
          />

62
        </>

63
      ),

64
    };

65
  }

66


67
  // TODO: this "lang={...}" is only working for the very first page that's being loaded

68
  // next's dynamic page updates to not have an impact on this. So, to really fix this, we

69
  // probably have to get rid of this _document customization and update to version 15 properly.

70
  render() {

71
    return (

72
      <Html lang={this.props.locale}>

73
        <Head />

74
        <body>

75
          <Main />

76
          <NextScript />

77
        </body>

78
      </Html>

79
    );

80
  }

81
}

82


83