_document.tsx 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. import Document, {
  2. Html,
  3. Head,
  4. Main,
  5. NextScript,
  6. DocumentContext,
  7. } from "next/document";
  8. import { ServerStyleSheet } from "styled-components";
  9. class MyDocument extends Document {
  10. static async getInitialProps(ctx: DocumentContext) {
  11. const sheet = new ServerStyleSheet();
  12. const originalRenderPage = ctx.renderPage;
  13. try {
  14. ctx.renderPage = () =>
  15. originalRenderPage({
  16. enhanceApp: (App) => (props) =>
  17. sheet.collectStyles(<App {...props} />),
  18. });
  19. const initialProps = await Document.getInitialProps(ctx);
  20. return {
  21. ...initialProps,
  22. styles: (
  23. <>
  24. {initialProps.styles}
  25. {sheet.getStyleElement()}
  26. </>
  27. ),
  28. };
  29. } finally {
  30. sheet.seal();
  31. }
  32. }
  33. render() {
  34. return (
  35. <Html lang="en">
  36. <Head>
  37. <link rel="icon" href="/favicon.ico" />
  38. <link rel="preconnect" href="https://fonts.googleapis.com" />
  39. <link
  40. rel="preconnect"
  41. href="https://fonts.gstatic.com"
  42. crossOrigin="anonymous"
  43. />
  44. <link
  45. href="https://fonts.googleapis.com/css2?family=Catamaran:wght@300;400;500;600;700&family=PT+Sans:wght@400;700&display=swap"
  46. rel="stylesheet"
  47. />
  48. </Head>
  49. <body>
  50. <Main />
  51. <NextScript />
  52. </body>
  53. </Html>
  54. );
  55. }
  56. }
  57. export default MyDocument;