Fix next-head-count issue

pages/_app.js

@@ -1,19 +1,6 @@
-import Head from 'next/head';
 import './styles.css';
 
-const App = ({ Component, pageProps }) => {
+function App({ Component, pageProps }) {
-  return (
+  return <Component {...pageProps} />
-    <Head>
+}
-      <title>GPT-3 Writer | buildspace</title>
-      <meta property="og:title" content="GPT-3 Writer" />
-      <meta property="og:description" content="build with buildspace" />
-      <meta
-        property="og:image"
-        content="https://cdn.buildspace.so/courses/gpt3-writer/project-og.jpg"
-      />
-      <Component {...pageProps} />;
-    </Head>
-  );
-};
-
 export default App;

pages/_document.js

@@ -0,0 +1,20 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html>
+      <Head>
+        <meta property="og:title" content="GPT-3 Writer" key="title"/>
+        <meta property="og:description" content="build with buildspace" key="description"/>
+        <meta
+          property="og:image"
+          content="https://cdn.buildspace.so/courses/gpt3-writer/project-og.jpg"
+        />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}

pages/index.js

@@ -1,9 +1,13 @@
+import Head from 'next/head';
 import Image from 'next/image';
 import buildspaceLogo from '../assets/buildspace-logo.png';
 
 const Home = () => {
   return (
     <div className="root">
+      <Head>
+        <title>GPT-3 Writer | buildspace</title>
+      </Head>
       <div className="container">
         <div className="header">
           <div className="header-title">