Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
sagemathinc
GitHub Repository: sagemathinc/cocalc
 Path: blob/master/src/packages/next/pages/_document.tsx
5790 views
1
// pages/_document.tsx

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

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

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

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

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

7


8
export default class MyDocument extends Document<{ locale: Locale }> {

9
  static async getInitialProps(

10
    ctx: DocumentContext,

11
  ): Promise<DocumentInitialProps & { locale: Locale }> {

12
    const locale = query2locale(ctx.query);

13
    const cache = createCache();

14
    const originalRenderPage = ctx.renderPage;

15


16
    ctx.renderPage = () =>

17
      originalRenderPage({

18
        enhanceApp: (App: any) => (props: any) => (

19
          <StyleProvider cache={cache} hashPriority="high">

20
            <App {...props} locale={locale} />

21
          </StyleProvider>

22
        ),

23
      });

24


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

26


27
    // inline critical AntD CSS as real <style> tags (no script hack)

28
    const css = extractStyle(cache, { plain: true, types: ["style", "token"] });

29


30
    return {

31
      ...initialProps,

32
      locale,

33
      styles: (

34
        <>

35
          {initialProps.styles}

36
          <style

37
            // keep it obvious for debugging

38
            data-antd="cssinjs-ssr"

39
            // extractStyle returns complete <style> tags; that’s OK here

40
            // If you prefer only the CSS text, you can parse it, but this works well in practice.

41
            dangerouslySetInnerHTML={{ __html: css }}

42
          />

43
        </>

44
      ),

45
    };

46
  }

47


48
  render() {

49
    return (

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

51
        <Head />

52
        <body>

53
          <Main />

54
          <NextScript />

55
        </body>

56
      </Html>

57
    );

58
  }

59
}

60


61