Skip to content

Instantly share code, notes, and snippets.

@dipeshhkc
Last active May 22, 2021 10:17
Show Gist options
  • Save dipeshhkc/ac21c61516c74338c27d6d033279277e to your computer and use it in GitHub Desktop.
Save dipeshhkc/ac21c61516c74338c27d6d033279277e to your computer and use it in GitHub Desktop.
import Document, { Html, Head, Main, NextScript } from "next/document";
import { SheetsRegistry, JssProvider, createGenerateId } from "react-jss";
class MyDocument extends Document {
static async getInitialProps(ctx) {
const registry = new SheetsRegistry();
const generateId = createGenerateId();
const originalRenderPage = ctx.renderPage;
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) => (
<JssProvider registry={registry} generateId={generateId}>
<App {...props} />
</JssProvider>
),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
<style id="server-side-styles">{registry.toString()}</style>
</>
),
};
}
render() {
return (
<Html>
<Head>
<link rel="icon" href="link to favicon" />
<link href="link to font" rel="stylesheet">
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
@SetupCoding
Copy link

Line 32 requires a slash:
<link href="link to font" rel="stylesheet" />

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment