Move loading of fa stylesheet to next Docment component

See https://nextjs.org/docs/messages/no-stylesheets-in-head-component
pennlabs · Feb 11, 2023 · 05a61a4 · 05a61a4
1 parent a64d5e4
commit 05a61a4
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 9 deletions.
diff --git a/frontend/pages/_app.tsx b/frontend/pages/_app.tsx
@@ -1,5 +1,4 @@
 import { useEffect } from "react";
-import Head from "next/head";
 import "semantic-ui-css/semantic.min.css";
 import "../styles/index.css";
 import { SWRConfig } from "swr";
@@ -19,14 +18,6 @@ const MyApp = ({ Component, pageProps }) => {
                 refreshWhenHidden: true,
             }}
         >
-            <Head>
-                <link
-                    rel="stylesheet"
-                    href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
-                    integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
-                    crossOrigin="anonymous"
-                />
-            </Head>
             {/* This is necessary for generic HOC */}
             {/* eslint-disable-next-line */}
             <Component {...pageProps} />

diff --git a/frontend/pages/_document.tsx b/frontend/pages/_document.tsx
@@ -0,0 +1,22 @@
+import { Html, Head, Main, NextScript } from "next/document";
+
+const Document = () => {
+    return (
+        <Html>
+            <Head>
+                <link
+                    rel="stylesheet"
+                    href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
+                    integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
+                    crossOrigin="anonymous"
+                />
+            </Head>
+            <body>
+                <Main />
+                <NextScript />
+            </body>
+        </Html>
+    );
+};
+
+export default Document;