keystone/docs/pages/_document.tsx at main · hmmhmmhm/keystone

Repository navigation

import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document';

import React from 'react';

import createEmotionServer from '@emotion/server/create-instance';

import { cache } from '@emotion/css';

const { extractCriticalToChunks } = createEmotionServer(cache);

class MyDocument extends Document {

static async getInitialProps(ctx: DocumentContext) {

const initialProps = await Document.getInitialProps(ctx);

const data = extractCriticalToChunks(initialProps.html);

return {

...initialProps,

styles: [

<React.Fragment key="1">

{initialProps.styles}

{data!.styles.map((data, i) => (

<style

key={i}

data-emotion={`${data.key} ${data.ids.join(' ')}`}

dangerouslySetInnerHTML={{ __html: data.css }}

))}

</React.Fragment>,

};

}

render() {

return (

<Html>

<Head>

<link

href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap"

rel="stylesheet"

<script

async

src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"

</Head>

<body>

</body>

</Html>

);

}

export default MyDocument;