1import { Global } from '@emotion/react'; 2import { BlockingSetInitialColorMode } from '@expo/styleguide'; 3import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'; 4import React from 'react'; 5 6import { globalExtras } from '~/global-styles/extras'; 7import { globalFonts } from '~/global-styles/fonts'; 8import { globalNProgress } from '~/global-styles/nprogress'; 9import { globalPrism } from '~/global-styles/prism'; 10import { globalReset } from '~/global-styles/reset'; 11import { globalTippy } from '~/global-styles/tippy'; 12 13export default class MyDocument extends Document<{ css?: string }> { 14 static async getInitialProps(ctx: DocumentContext) { 15 const initialProps = await Document.getInitialProps(ctx); 16 return { 17 ...initialProps, 18 styles: <>{initialProps.styles}</>, 19 }; 20 } 21 22 render() { 23 return ( 24 <Html lang="en"> 25 <Head> 26 <Global 27 styles={[ 28 globalFonts, 29 globalReset, 30 globalNProgress, 31 globalPrism, 32 globalTippy, 33 globalExtras, 34 ]} 35 /> 36 37 <link 38 rel="preload" 39 href="/static/fonts/Inter-Regular.woff2?v=3.15" 40 as="font" 41 type="font/woff2" 42 crossOrigin="anonymous" 43 /> 44 </Head> 45 <body> 46 <BlockingSetInitialColorMode /> 47 <Main /> 48 <NextScript /> 49 </body> 50 </Html> 51 ); 52 } 53} 54