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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
Example #15
| Source File: _document.tsx From tams-club-cal with MIT License | 6 votes |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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>
);
}
