next/document#Html JavaScript 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.js From module-federation-examples with MIT License | 6 votes |
|
render() {
return (
<Html>
<ExtendedHead>
<meta name="robots" content="noindex" />
{Object.values(this.props.remoteChunks)}
</ExtendedHead>
<body className="bg-background-grey">
<Main />
<NextScript />
</body>
</Html>
);
}
Example #2
| Source File: _document.jsx From pooltogether-community-ui with MIT License | 6 votes |
|
render() {
return (
<Html>
<Head />
<Meta />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
Example #3
| Source File: _document.js From force-website with MIT License | 6 votes |
|
render() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
Example #4
| Source File: _document.js From pluralsight-designing-react-components-course-code with MIT License | 6 votes |
|
render() {
return (
<Html>
<Head>
<meta charSet="utf-8" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Open+Sans"
rel="stylesheet"
/>
<link href="css/local-styles.css" rel="stylesheet" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
Example #5
| Source File: _document.js From elliot-serverless-ecommerce with MIT License | 6 votes |
|
render() {
return (
<Html lang="en">
<Head>
<script
async
src={`https://maps.googleapis.com/maps/api/js?key=AIzaSyDyqbYgLLHYOqlBDs6-TjsUpcNRIwaDskk&libraries=places`}
/>
<script async src="https://js.stripe.com/v3/" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/themes/reset-min.css"
integrity="sha256-t2ATOGCtAIZNnzER679jwcFcKYfLlw01gli6F6oszk8="
crossOrigin="anonymous"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
Example #6
| Source File: _document.js From kitty-items with Apache License 2.0 | 6 votes |
|
render() {
return (
<Html>
<Head />
<body className="bg-gray-50">
<Main />
<NextScript />
</body>
</Html>
)
}
Example #7
| Source File: _document.jsx From docs with MIT License | 6 votes |
|
render() {
return (
<Html lang="en">
<Head>
<link rel="shortcut icon" href="/favicon.png" />
</Head>
<body>
<Main />
<NextScript />
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"
></script>
</body>
</Html>
);
}
Example #8
| Source File: _document.js From botble-graphql-next with MIT License | 6 votes |
|
render() {
return (
<Html lang="vi">
<Head>
<meta name="version" content={process.env.APP_VERSION} />
<meta
name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover"
/>
<meta httpEquiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta
httpEquiv="Cache-Control"
content="no-cache, no-store, must-revalidate"
/>
<link rel="shortcut icon" href="/favicon.ico" />
{process.env.APP_GOOGLE_TAG_KEY && (
<script
dangerouslySetInnerHTML={{
__html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','${process.env.APP_GOOGLE_TAG_KEY}');`,
}}
/>
)}
</Head>
<body className="text-gray-900 text-sm antialiased">
<Main />
<NextScript />
</body>
</Html>
);
}
Example #9
| Source File: _document.js From js-code with ISC License | 6 votes |
|
render() {
return (
<Html lang='en-GB'>
<Head>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
Example #10
| Source File: _document.js From Anomly with MIT License | 6 votes |
|
render() {
return (
<Html>
<Head>
<meta
name="description"
content="Anonymous realtime chat"
/>
<meta
name="keywords"
content="NextJS, Chat, Anonymous, Realtime"
/>
<meta name="author" content="Shoaib Asgar" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</Html>
);
}
Example #11
| Source File: _document.js From module-federation-examples with MIT License | 6 votes |
|
render() {
return (
<Html>
<Head />
<body>
<Main />
Scipt is only needed if you are not using the federation @ syntax when setting your
remotes.
<script src="http://localhost:8081/_next/static/chunks/remoteEntry.js" />
<NextScript />
</body>
</Html>
);
}
Example #12
| Source File: _document.js From nextjs-starter-prismic-multi-language with Apache License 2.0 | 6 votes |
|
export default function Document() {
return (
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap"
rel="stylesheet"
/>
</Head>
<body className="overflow-x-hidden antialiased">
<Main />
<NextScript />
</body>
</Html>
);
}
Example #13
| Source File: _document.js From module-federation-examples with MIT License | 6 votes |
|
render() {
return (
<Html>
<ExtendedHead>
<meta name="robots" content="noindex" />
{Object.values(this.props.remoteChunks)}
</ExtendedHead>
<body className="bg-background-grey">
<Main />
<NextScript />
</body>
</Html>
);
}
Example #14
| Source File: _document.js From rsc-www with GNU Affero General Public License v3.0 | 6 votes |
|
render() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
Example #15
| Source File: _document.js From portfolio with MIT License | 6 votes |
|
render() {
return (
<Html lang='en-GB'>
<Head>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
<meta name="title" content="Vipul Jha - Android & Flutter Dev" />
<meta name="description" content="Hey there, This is Vipul Jha aka lordarcadius. I am an Android & Flutter developer who also works on ROMs, Kernels, & Scripts." />
<meta property="og:type" content="website" />
<meta property="og:title" content="Vipul Jha - Android & Flutter Dev" />
<meta property="og:description" content="Hey there, This is Vipul Jha aka lordarcadius. I am an Android & Flutter developer who also works on ROMs, Kernels, & Scripts." />
<meta property="og:image" content="https://www.vipuljha.com/images/banner.png" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:title" content="Vipul Jha - Android & Flutter Dev" />
<meta property="twitter:description" content="Hey there, This is Vipul Jha aka lordarcadius. I am an Android & Flutter developer who also works on ROMs, Kernels, & Scripts." />
<meta property="twitter:image" content="https://www.vipuljha.com/images/banner.png" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
Example #16
| Source File: _document.js From realworld with MIT License | 6 votes |
|
render() {
return (
<Html>
<Head>
<link
href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"
rel="stylesheet"
/>
<link
href="//fonts.googleapis.com/css?family=Titillium+Web:700|Source+Serif+Pro:400,700|Merriweather+Sans:400,700|Source+Sans+Pro:400,300,600,700,300italic,400italic,600italic,700italic"
rel="stylesheet"
/>
<link rel="stylesheet" href="//demo.productionready.io/main.css" />
<link href="//fonts.googleapis.com" rel="preconnect" />
<link href="//fonts.gstatic.com" rel="preconnect" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
Example #17
| Source File: _document.js From Portfolio with MIT License | 6 votes |
|
render() {
return (
<Html lang="en" style={{ overflowX: "hidden" }}>
<Head>
<meta charSet='utf-8' />
{/* PWA primary color */}
<meta name="theme-color" content="black" />
<meta name="description" content={`Portfolio of ${name}`}/>
<meta name='keywords' content={'Portfolio ' + name + ' skills projects experience resume'} />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<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.webmanifest"></link>
{/* <script async src="https://www.googletagmanager.com/gtag/js?id=G-3S0X8Y5X3J"></script>
<script
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-3S0X8Y5X3J');
`
}}
/> */}
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
Example #18
| Source File: _document.js From caasy-nextjs-blog-template with MIT License | 6 votes |
|
render() {
return (
<Html lang={blogConfig.defaultLanguage}>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
Example #19
| Source File: _document.js From nextjs-todo-list with MIT License | 6 votes |
|
render() {
return (
<Html lang="en">
<Head>
{/* PWA primary color */}
<meta name="theme-color" content={theme.palette.primary.main} />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
Example #20
| Source File: _document.js From strapi-starter-next-blog with MIT License | 6 votes |
|
render() {
return (
<Html>
<Head>
{/* eslint-disable-next-line */}
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Staatliches"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css"
/>
<script
async
src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.2.0/js/uikit.min.js"
/>
<script
async
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"
/>
<script
async
src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.2.0/js/uikit.js"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
Example #21
| Source File: _document.js From vivek9patel.github.io with MIT License | 6 votes |
|
render() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
Example #22
| Source File: _document.js From awesome-react-starter with MIT License | 6 votes |
|
Document = () => {
return (
<Html>
<Head>
<AppHead />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
Example #23
| Source File: _document.js From vertx-web-site.github.io with Apache License 2.0 | 6 votes |
|
function MyDocument() {
return (
<Html lang="en">
<Head>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap" rel="stylesheet"/>
</Head>
<body data-build-time={process.env.buildDate} data-build-commit-id={process.env.GITHUB_SHA}
data-build-run-id={process.env.GITHUB_RUN_ID}>
<Main />
<NextScript />
</body>
</Html>
)
}
Example #24
| Source File: _document.js From plataforma-sabia with MIT License | 6 votes |
|
render() {
return (
<Html lang="pt-BR">
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
Example #25
| Source File: _document.js From tuliofaria.dev with MIT License | 6 votes |
|
render() {
return (
<Html>
<Head />
<body className='bg-body'>
<Main />
<NextScript />
</body>
</Html>
)
}
Example #26
| Source File: _document.js From tailwind-nextjs-starter-blog with MIT License | 6 votes |
|
render() {
return (
<Html lang="en" className="scroll-smooth">
<Head>
<link rel="apple-touch-icon" sizes="76x76" href="/static/favicons/apple-touch-icon.png" />
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/static/favicons/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/static/favicons/favicon-16x16.png"
/>
<link rel="manifest" href="/static/favicons/site.webmanifest" />
<link rel="mask-icon" href="/static/favicons/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#000000" />
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#fff" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000" />
<link rel="alternate" type="application/rss+xml" href="/feed.xml" />
</Head>
<body className="bg-white text-black antialiased dark:bg-gray-900 dark:text-white">
<Main />
<NextScript />
</body>
</Html>
)
}
Example #27
| Source File: _document.js From teaful with MIT License | 6 votes |
|
render() {
return (
<Html>
<Head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=DM+Mono&family=Inter:wght@400;700&display=swap" rel="stylesheet" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
Example #28
| Source File: _document.js From react-menu with MIT License | 6 votes |
|
render() {
return (
<Html lang="en">
<Head>
<meta
name="description"
content="React components for building accessible menu, dropdown, submenu, context menu, tooltip, and more."
/>
<meta name="theme-color" content="#000000" />
<link rel="shortcut icon" href={`${basePath}/favicon.ico`} />
<link rel="manifest" href={`${basePath}/manifest.json`} />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
</Head>
<body className={bem('szh-app', null, { theme: 'dark' })}>
<Main />
<NextScript />
</body>
</Html>
);
}
Example #29
| Source File: _document.js From repository.surf with MIT License | 6 votes |
|
render() {
return (
<Html lang="en" className="dark">
<Head>
<link rel="stylesheet" href="/uPlot/uPlot.min.css" />
<script type="text/javascript" src="/uPlot/uPlot.iife.min.js" />
</Head>
<body className="bg-gray-700">
<Main />
<NextScript />
</body>
</Html>
)
}
