text: import React from 'react';
  import Document, { Html, Head, Main, NextScript } from 'next/document';
  import { ServerStyleSheet } from 'styled-components';
  
  class MyDocument extends Document {
    static async getInitialProps(ctx) {
      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();
      }
    }
  
    render() {
      return (
        <Html>
          <Head>
            <meta charSet="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            <title>{this.props.title || 'htmllinter playground'}</title>
            <link
              href="https://fonts.googleapis.com/css?family=Kanit&display=swap"
              rel="stylesheet"
            />
            <script src="https://cdn.polyfill.io/v2/polyfill.min.js" />
          </Head>
          <body style={{ margin: 'auto' }}>
            <style jsx>{`
              * {
                font-family: 'Kanit' !important;
              }
              body {
                margin: auto !important;
              }
            `}</style>
            <Main />
            <NextScript />
          </body>
        </Html>
      );
    }
  }
  
  export default MyDocument;
  