Merge pull request #141 from Web-Dev-Path/fix/no-stylesheets-in-head-component

mariana-caldas · web-flow · commit 9eb56b1cc689 · 2022-11-06T17:45:30.000-08:00
Fix warning - "no stylesheets in head component"
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -68,3 +68,6 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - updated mobile nav to automatically close when page route change is completed
 - adjust flex-basis of a few sections in the about page to better match the design file
 - prettierrc "end of line" to auto
+- fixed next.js warning - no stylesheets in head component 
+  (added _document.js and moved google fonts into _document.js)
+
diff --git a/components/layout/Meta.js b/components/layout/Meta.js
@@ -44,16 +44,6 @@ export default function Meta() {
       <meta property='og:image:width' content='1200' />
       <meta property='og:image:height' content='1200' />
       <meta name='robots' content='index, follow' />
-      <link rel='preconnect' href='https://fonts.googleapis.com' />
-      <link
-        rel='preconnect'
-        href='https://fonts.gstatic.com'
-        crossOrigin='true'
-      />
-      <link
-        href='https://fonts.googleapis.com/css2?family=Assistant:wght@400;700&family=Open+Sans:wght@700&display=swap'
-        rel='stylesheet'
-      />
       <link rel='canonical' href='https://www.webdevpath.co' />
     </Head>
   );
diff --git a/pages/_document.js b/pages/_document.js
@@ -0,0 +1,18 @@
+import { Html, Head, Main, NextScript } from 'next/document';
+
+export default function Document() {
+  return (
+    <Html>
+      <Head>
+        <link
+          rel='stylesheet'
+          href='https://fonts.googleapis.com/css2?family=Assistant:wght@400;700&family=Open+Sans:wght@700&display=swap'
+        />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}
