pages/_document.tsx (63 lines of code) (raw):
import Document, { Html, Head, Main, NextScript } from "next/document";
import { Provider as StyletronProvider } from "styletron-react";
import { styletron } from "../lib/styletron";
import { GA_TRACKING_ID } from "../lib/gtag";
class MyDocument extends Document<{ stylesheets: any[] }> {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
const page = ctx.renderPage((App) => (props) => (
<StyletronProvider value={styletron}>
<App {...props} />
</StyletronProvider>
));
const stylesheets = styletron.getStylesheets() || [];
return { ...initialProps, page, stylesheets };
}
render() {
return (
<Html lang="en">
<Head>
<meta name="robots" content="noindex" />
{/* Global Site Tag (gtag.js) - Google Analytics */}
<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,
});
`,
}}
/>
<link
rel="preload"
href="/UberMoveText-Regular.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
<link
rel="preload"
href="/UberMove-Medium.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
{/*
Next.js docs say to put global CSS in _app.tsx and load it with
`import`, but we need to load our font declarations before anything
else or there will be a flicker as the font changes.
*/}
<link rel="stylesheet" href="/fonts.css" />
{this.props.stylesheets.map((sheet, i) => (
<style
className="_styletron_hydrate_"
dangerouslySetInnerHTML={{ __html: sheet.css }}
media={sheet.attrs.media}
data-hydrate={sheet.attrs["data-hydrate"]}
key={i}
/>
))}
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;