next/document#Html TypeScript Examples

The following examples show how to use next/document#Html. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: _document.tsx    From 1loc with MIT License 6 votes vote down vote up
render() {
        return (
            <Html>
                <Head>
                    <meta charSet="utf-8" />
                    <link rel="icon" href="/favicon.png" type="image/png" />
                    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
                    <link rel="mask-icon" href="/mask-favicon.svg" color="#1975FF" />
                    <meta content="Favorite JavaScript utilities in single line of code" name="description" />
                    <meta content="JavaScript helpers, JavaScript snippets, JavaScript utils" name="keywords" />
                    <meta content="Nguyen Huu Phuoc" name="author" />

                    <meta content="@nghuuphuoc" name="twitter:site" />
                    <meta content="summary" name="twitter:card" />
                    <meta name="twitter:title" content="Favorite JavaScript utilities in single line of code - 1 LOC" />
                    <meta name="twitter:description" content="Favorite JavaScript utilities in single line of code" />

                    <meta property="og:title" content="Favorite JavaScript utilities in single line of code - 1 LOC" />
                    <meta property="og:description" content="Favorite JavaScript utilities in single line of code" />
                    <meta name="description" content="Favorite JavaScript utilities in single line of code" />

                    <meta content="article" property="og:type" />
                    <meta content="https://1loc.dev" property="og:url" />
                    <meta content="1LOC" property="og:site_name" />

                    <link rel="preconnect" href="https://fonts.googleapis.com" />
                    <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
                    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?&family=Source+Code+Pro:wght@400&family=Inter:wght@400;700&display=swap" />
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
Example #2
Source File: _document.tsx    From 35d-blog with MIT License 6 votes vote down vote up
render() {
    return (
      <Html lang="ja">
        <Head>
          <script async src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`} />
          <script
            dangerouslySetInnerHTML={{
              __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${GA_TRACKING_ID}', {
              page_path: window.location.pathname,
            });
          `,
            }}
          />
          {/* Adsense は使用しないことにした */}
          {/* <script
            data-ad-client="ca-pub-6440039437376764"
            async
            src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
          ></script> */}
        </Head>
        <body
          className="p-[5%] pt-10 sm:pt-40 bg-gray-200 dark:bg-gray-800 font-normal text-gray-700 dark:text-gray-300 antialiased leading-relaxed sm:leading-relaxed transition-colors text-sm sm:text-base
        
        "
        >
          <div className="w-full max-w-3xl mx-auto flex flex-wrap items-start">
            <Main />
            <NextScript />
          </div>
        </body>
      </Html>
    )
  }
Example #3
Source File: _document.tsx    From merkle-airdrop-starter with GNU Affero General Public License v3.0 6 votes vote down vote up
render() {
    return (
      // Wrap in html with custom lang param
      <Html lang="en">
        {/* Preload head */}
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
Example #4
Source File: _document.tsx    From next-saas-starter with MIT License 6 votes vote down vote up
render() {
    return (
      <Html lang="en">
        <Head>
          <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet" />
        </Head>
        <body className="next-light-theme">
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
Example #5
Source File: _document.tsx    From nextjs-shopify with MIT License 6 votes vote down vote up
render() {
    return (
      <Html>
        <Head />
        <body>
          <style
            dangerouslySetInnerHTML={{
              __html: (this.props as any).globalStyles,
            }}
          ></style>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
Example #6
Source File: _document.tsx    From Cromwell with MIT License 6 votes vote down vote up
render() {
        const pageProps: TPageCmsProps | undefined = this.props.__NEXT_DATA__.props?.pageProps?.cmsProps;
        const theme = getTheme(pageProps?.palette);
        const cmsSettings: TCmsSettings = this.props.__NEXT_DATA__.props?.pageProps?.cmsSettings;
        return (
            <Html lang={cmsSettings?.language ?? 'en'}>
                <Head>
                    <meta name="theme-color" content={theme.palette.primary.main} />
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        )
    }
Example #7
Source File: _document.tsx    From frames with Mozilla Public License 2.0 6 votes vote down vote up
export default function Document() {
    return (
        <Html>
            <Head>
                <link rel="manifest" href="/manifest.json"/>
                <link rel="apple-touch-icon" href="/icon-512x512"/>
                <meta name="theme-color" content="#01101c"/>
            </Head>
            <body>
                <Main />
                <NextScript />
            </body>
        </Html>
    )
}
Example #8
Source File: _document.tsx    From frontend.ro with MIT License 6 votes vote down vote up
render() {
    return (
      <Html lang="ro">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
Example #9
Source File: _document.tsx    From space-traveling with MIT License 6 votes vote down vote up
render() {
    return (
      <Html lang="pt-BR">
        <Head>
          <link rel="preconnect" href="https://fonts.gstatic.com" />
          <link
            href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
          <script
            async
            defer
            src="https://static.cdn.prismic.io/prismic.js?new=true&repo=spacetraveling2"
          />
        </body>
      </Html>
    );
  }
Example #10
Source File: _document.tsx    From frontend with GNU General Public License v3.0 6 votes vote down vote up
render(): JSX.Element {
    return (
      <Html lang="en">
        <Head>
          <title>Geeks-Academy, space for programmers</title>
          <meta
            name="desctiption"
            content="Application for programmers, you can match yourself with mentors and practise skills on web courses."
          />
          <link
            href="https://fonts.googleapis.com/css2?family=Manrope:wght@600&family=Source+Code+Pro&display=swap"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
Example #11
Source File: _document.tsx    From staticshield with MIT License 6 votes vote down vote up
render() {
    return (
      <Html lang='en'>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
Example #12
Source File: _document.tsx    From use-selected-items-hook with MIT License 6 votes vote down vote up
render(): JSX.Element {
    return (
      <Html>
        <Head>
          <link rel="icon" type="image/png" sizes="16x16" href="/favicon.png" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
Example #13
Source File: _document.tsx    From BloggerWeb with GNU General Public License v3.0 6 votes vote down vote up
render(): JSX.Element {
    return (
      <Html lang="en">
        <Head />
        <body className="bg-white dark:bg-black text-gray-900 dark:text-white">
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
Example #14
Source File: _document.tsx    From master-frontend-lemoncode with MIT License 6 votes vote down vote up
render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
Example #15
Source File: _document.tsx    From tams-club-cal with MIT License 6 votes vote down vote up
render() {
        return (
            <Html lang="en">
                <Head>
                    <link rel="shortcut icon" href="/favicon.ico" />
                    <link rel="apple-touch-icon" href="/android-chrome-192x192.png" />
                    <link rel="manifest" href="/manifest.json" />
                    <link rel="preconnect" href="https://fonts.gstatic.com" />
                    <link
                        href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&family=Bubblegum+Sans&family=Roboto+Mono:wght@500&display=swap"
                        rel="stylesheet"
                    />
                    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
                    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded" rel="stylesheet" />

                    {/* Inject MUI styles first to match with the prepend: true configuration. */}
                    {(this.props as any).emotionStyleTags}
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
Example #16
Source File: _document.tsx    From website with MIT License 6 votes vote down vote up
render(): JSX.Element {
		return (
			<Html>
				<Head>
					<link
						href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"
						rel="stylesheet"
					/>
				</Head>
				<body>
					<Main />
					<NextScript />
				</body>
			</Html>
		);
	}
Example #17
Source File: _document.tsx    From hypertext with GNU General Public License v3.0 6 votes vote down vote up
render(): JSX.Element {
    return (
      <Html lang="en">
        <Head>
          <meta key="description" name="Description" content="A text-forward Uniswap interface." />
        </Head>

        <body>
          <Main />
          <NextScript />
          <script
            defer
            src="https://static.cloudflareinsights.com/beacon.min.js"
            data-cf-beacon='{"token": "49191f37be44461dbce1d932a3d6ffeb"}'
          ></script>
        </body>
      </Html>
    )
  }
Example #18
Source File: _document.tsx    From norfolkdevelopers-website with MIT License 6 votes vote down vote up
render() {
    return (
      <Html lang="en">
        <Head />

        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
Example #19
Source File: _document.tsx    From react-notion-x with MIT License 6 votes vote down vote up
render() {
    return (
      <Html lang='en'>
        <Head />

        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
Example #20
Source File: _document.page.tsx    From crowdsource-dataplatform with MIT License 6 votes vote down vote up
render() {
    return (
      <Html lang={this.props.locale} className="h-100">
        <Head>
          <link rel="preconnect" href="https://fonts.googleapis.com" />
          <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css?family=Rowdies:300,400,700&display=swap"
          />
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap"
          />
          <script async src={`https://www.googletagmanager.com/gtag/js?id=G-3B78XVT75C`} />
          <script
            dangerouslySetInnerHTML={{
              __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'G-3B78XVT75C', {
              page_path: window.location.pathname,
            });
          `,
            }}
          />
        </Head>
        <body className="d-flex flex-column">
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
Example #21
Source File: _document.tsx    From mkn with MIT License 6 votes vote down vote up
render() {
    return (
      <Html lang="en" className="no-js">
        <Head>
          <meta name="referrer" content="no-referrer" />
          <link rel="icon" href="/favicons/favicon.svg" />
          <meta name="theme-color" content="#ffffff" />
          <meta
            name="description"
            content="Web site created using mkn (with Next.js and typescript)"
          />
          <meta name="apple-mobile-web-app-capable" content="yes" />
          <meta
            name="apple-mobile-web-app-status-bar-style"
            content="default"
          />
          <link rel="apple-touch-icon" href="/favicons/logo192.png" />
          <link rel="manifest" href="/manifest.json" />
        </Head>
        <body>
          <Main />
          <NextScript />

          <style
            id={DISABLE_SSR_TRANSITION}
            // eslint-disable-next-line react/no-danger
            dangerouslySetInnerHTML={{
              __html: '*, *::before, *::after { transition: none !important; }',
            }}
          />
        </body>
      </Html>
    );
  }
Example #22
Source File: _document.tsx    From Teyvat.moe with GNU General Public License v3.0 6 votes vote down vote up
render(): JSX.Element {
    return (
      <Html>
        <Head>
          <PageHeaders />
        </Head>
        <body>
          {/* Main gets replaced with the actual page content. */}
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
Example #23
Source File: _document.tsx    From graphql-mesh with MIT License 6 votes vote down vote up
render() {
    return (
      <Html>
        <Head>
          <link rel="preconnect" href="https://fonts.gstatic.com" />
          <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" rel="stylesheet" />
        </Head>
        <body>
          <ColorModeScript initialColorMode="light" />
          <Main />
          <NextScript />
          <script async src="https://the-guild.dev/static/crisp.js" />
        </body>
      </Html>
    );
  }
Example #24
Source File: _document.tsx    From posso-uscire with GNU General Public License v3.0 6 votes vote down vote up
render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
Example #25
Source File: _document.tsx    From website with Apache License 2.0 6 votes vote down vote up
render() {
		return (
			<Html lang="en">
				<Head>
					<meta charSet="utf-8" />
					<link
						rel="icon"
						type="image/png"
						href="https://avatars3.githubusercontent.com/u/25351731?s=460&v=4"
					/>
					<meta name="theme-color" content="#ffffff" />
					<meta
						name="description"
						content="Alistair Smith, Full–stack TypeScript engineer from the UK"
					/>
					<link rel="preconnect" href="https://fonts.gstatic.com" />
					<link
						href="https://fonts.googleapis.com/css2?family=Krona+One&family=Roboto:wght@400;700&display=swap"
						rel="stylesheet"
					/>
				</Head>
				<body>
					<Main />
					<NextScript />
					<script async src="/theme.js" />
					<script async defer src="https://lab.alistair.cloud/latest.js" />
				</body>
			</Html>
		);
	}
Example #26
Source File: _document.tsx    From telegram-standup-bot with MIT License 6 votes vote down vote up
render() {
    return (
      <Html>
        <Head />
        <body>
          <script
            dangerouslySetInnerHTML={{
              __html: `
            (function(){
              if (!window.localStorage) return;
              if (window.localStorage.getItem('theme') === 'dark') {
                document.documentElement.style.background = '#000';
                document.body.style.background = '#000';
              } else {
                document.documentElement.style.background = '#fff';
                document.body.style.background = '#fff';
              }
            })()`,
            }}
          />
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
Example #27
Source File: _document.tsx    From NextPay with MIT License 6 votes vote down vote up
render() {
    return (
      <Html>
        <Head>
          <meta
            name="description"
            content="Your own LnPay Server"
            key="description"
          />
          <link
            href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&display=swap"
            rel="stylesheet"
          ></link>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
Example #28
Source File: _document.tsx    From storefront with MIT License 6 votes vote down vote up
render() {
    return (
      <Html lang="en">
        <Head>
          <link rel="dns-prefetch" href="//www.google-analytics.com" />
          <link rel="dns-prefetch" href="//fonts.googleapis.com" />
          <link rel="dns-prefetch" href="//storage.googleapis.com" />
          <meta name="theme-color" content={theme.palette.common.black} />
          <link
            href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Amatic+SC:wght@400;700&display=swap"
            rel="stylesheet"
          />
          <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
          <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
          <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
          <link rel="manifest" href="/manifest.json" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
Example #29
Source File: _document.tsx    From frontend-boilerplate with MIT License 6 votes vote down vote up
render() {
    return (
      <Html lang="en">
        <Head>
          <link
            rel="stylesheet"
            href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
            integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
            crossOrigin="anonymous"
          />
          <meta name="application-TileColor" content="#4d7fff" />
          <meta name="theme-color" content="#4d7fff" />
          <link rel="shortcut icon" href="/favicon/favicon.ico" />
          <script
            async
            src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
          />
          <link
            href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
            rel="stylesheet"
          />
          <script
            dangerouslySetInnerHTML={{
              __html: `
              window.dataLayer = window.dataLayer || [];
              function gtag(){ dataLayer.push(arguments); }
              gtag('js', new Date());
    		  gtag('config', '${GA_TRACKING_ID}');
        	`,
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }