Minimal styling, powered by Goober.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

45 lines
967 B

  1. import NextDocument, {Html, Head, Main, NextScript, DocumentContext} from 'next/document';
  2. import { extractCss } from '@tesseract-design/goofy-goober';
  3. export default class Document extends NextDocument {
  4. static async getInitialProps(ctx: DocumentContext) {
  5. const page = await ctx.renderPage()
  6. const style = extractCss();
  7. const initialProps = await NextDocument.getInitialProps(ctx)
  8. return {
  9. ...initialProps,
  10. ...page,
  11. style,
  12. }
  13. }
  14. render() {
  15. const { style: rawStyle } = this.props as Record<string, unknown>
  16. const style = rawStyle as string
  17. return (
  18. <Html>
  19. <Head>
  20. {
  21. style.length > 0
  22. && (
  23. <style
  24. id="_goober"
  25. dangerouslySetInnerHTML={{ __html: style }}
  26. />
  27. )
  28. }
  29. </Head>
  30. <body>
  31. <Main />
  32. <NextScript />
  33. </body>
  34. </Html>
  35. )
  36. }
  37. }