next/document#DocumentInitialProps TypeScript Examples

static async getInitialProps(
    ctx: DocumentContext,
  ): Promise<DocumentInitialProps> {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }

static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    ctx.renderPage = () =>
      originalRenderPage({
        enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
      });

    const initialProps = await Document.getInitialProps(ctx);
    return {
      ...initialProps,
      styles: (
        <>
          {initialProps.styles}
          {sheet.getStyleElement()}
        </>
      ),
    };
  }

static async getInitialProps(context: DocumentContext): Promise<DocumentInitialProps> {
    // Render app and page and get the context of the page with collected side effects.
    const sheets = new ServerStyleSheets({
      // injectFirst: true,
      serverGenerateClassName: generateClassName,
    });
    const originalRenderPage = context.renderPage;

    context.renderPage = () =>
      originalRenderPage({
        // The method wraps your React node in a provider element.
        // It collects the style sheets during the rendering so they can be later sent to the client.
        enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
      });

    console.info(`Performing SSR for path ${context.pathname} (${context.locale})`);

    const initialProps = await Document.getInitialProps(context);

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

static async getInitialProps(
    ctx: DocumentContext
  ): Promise<DocumentInitialProps> {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />)
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        )
      }
    } finally {
      sheet.seal()
    }
  }

static async getInitialProps(
    ctx: DocumentContext,
  ): Promise<DocumentInitialProps> {
    const initialProps = await Document.getInitialProps(ctx);
    const styles = CssBaseline.flush();

    return {
      ...initialProps,
      styles: (
        <>
          {initialProps.styles}
          {styles}
        </>
      ),
    };
  }

static async getInitialProps(
    ctx: DocumentContext,
  ): Promise<DocumentInitialProps> {
    const injector = new VirtualStyleInjector();

    const originalRenderPage = ctx.renderPage;
    ctx.renderPage = (): ReturnType<typeof ctx.renderPage> =>
      originalRenderPage({
        enhanceApp: (App) => (props): JSX.Element => (
          // eslint-disable-next-line @typescript-eslint/camelcase, no-undef
          <StyleInjectorProvider injector={injector} nonce={__webpack_nonce__}>
            <App {...props} />
          </StyleInjectorProvider>
        ),
      });

    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps, styles: injector.getStyleElement() };
  }

static async getInitialProps(
    ctx: DocumentContext,
  ): Promise<DocumentInitialProps & ToolpadDocumentProps> {
    const originalRenderPage = ctx.renderPage;

    // You can consider sharing the same emotion cache between all the SSR requests to speed up performance.
    // However, be aware that it can have global side effects.
    const cache = createEmotionCache();
    const { extractCriticalToChunks } = createEmotionServer(cache);

    ctx.renderPage = () =>
      originalRenderPage({
        enhanceApp: (App: any) =>
          function EnhancedApp(props) {
            return <App emotionCache={cache} {...props} />;
          },
      });

    const initialProps = await Document.getInitialProps(ctx);
    // This is important. It prevents emotion to render invalid HTML.
    // See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153
    const emotionStyles = extractCriticalToChunks(initialProps.html);
    const emotionStyleTags = emotionStyles.styles.map((style) => (
      <style
        data-emotion={`${style.key} ${style.ids.join(' ')}`}
        key={style.key}
        // eslint-disable-next-line react/no-danger
        dangerouslySetInnerHTML={{ __html: style.css }}
      />
    ));

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

export default async function fetchDocumentData({
  Document,
  pageObject,
  renderPage,
}: {
  Document: DocumentType;
  pageObject: PageObject;
  renderPage: RenderPage;
}): Promise<DocumentInitialProps> {
  // @NOTE: Document has always a getInitialProps since inherits from NextDocument
  /* istanbul ignore next */
  const getDocumentInitialProps =
    Document.getInitialProps || NextDocument.getInitialProps;

  return executeAsIfOnServer(() =>
    getDocumentInitialProps({
      renderPage,
      pathname: pageObject.pagePath,
      query: pageObject.query,
      AppTree: Fragment,
      defaultGetInitialProps,
    })
  );
}

static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({ enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />) })
      const initialProps = await NextDocument.getInitialProps(ctx)
      const styles = [initialProps.styles, sheet.getStyleElement()]
      return { ...initialProps, styles }
    } finally {
      sheet.seal()
    }
  }

static async getInitialProps(
    ctx: DocumentContext
  ): Promise<DocumentInitialProps> {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }

static async getInitialProps(context: DocumentContext): Promise<DocumentInitialProps> {
        resetIds();

        const { html, head, styles, ...rest } = await Document.getInitialProps(context);

        return {
            ...rest,
            html,
            head: [
                ...(head ?? []),
                <script key="fluentui" dangerouslySetInnerHTML={{
                    __html: `
                        window.FabricConfig = window.FabricConfig || {};
                        window.FabricConfig.serializedStylesheet = ${stylesheet.serialize()};
                    `
                }} />
            ],
            styles: (
                <>
                    {styles}
                    <style dangerouslySetInnerHTML={{ __html: stylesheet.getRules() }} />
                </>
            )
        };
    }

static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
    const initialProps = await Document.getInitialProps(ctx);

    return initialProps;
  }

static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

defaultGetInitialProps = async (
  ctx: DocumentContext
): Promise<DocumentInitialProps> => {
  return ctx.defaultGetInitialProps(ctx);
}