WIP Seo

Author: okhaimie-dev

.env

@@ -0,0 +1,10 @@
+POSTGRES_URL="postgres://default:MoBLC3E5SlsF@ep-spring-paper-11512515-pooler.us-east-1.postgres.vercel-storage.com:5432/verceldb"
+POSTGRES_PRISMA_URL="postgres://default:MoBLC3E5SlsF@ep-spring-paper-11512515-pooler.us-east-1.postgres.vercel-storage.com:5432/verceldb?pgbouncer=true&connect_timeout=15"
+POSTGRES_URL_NON_POOLING="postgres://default:MoBLC3E5SlsF@ep-spring-paper-11512515.us-east-1.postgres.vercel-storage.com:5432/verceldb"
+POSTGRES_USER="default"
+POSTGRES_HOST="ep-spring-paper-11512515-pooler.us-east-1.postgres.vercel-storage.com"
+POSTGRES_PASSWORD="MoBLC3E5SlsF"
+POSTGRES_DATABASE="verceldb"
+
+NEXTAUTH_URL="https://localhost:3001"
+NEXTAUTH_SECRET="NtAam5HJz1PP+w0l3iyGcUgX4kfjhdY440W0XpD6Bro="

components/PageSeoLayout.tsx

@@ -0,0 +1,50 @@
+import { NextSeo } from 'next-seo'
+
+interface PageSeoLayoutProps {
+  title: string
+  description?: string
+  children: React.ReactNode
+}
+
+const PageSeoLayout = ({
+  title,
+  description,
+  children,
+}: PageSeoLayoutProps) => {
+  return (
+    <>
+      <NextSeo
+        openGraph={{
+          type: 'website',
+          locale: 'en_US',
+          url: `https://${process.env.NEXT_PUBLIC_VERCEL_URL}/landing-page-screenshot.png`,
+          site_name: 'Developer DAO Academy',
+          title: `Developer DAO Academy | ${title}`,
+          description: `${description}`,
+          images: [
+            {
+              url: `https://${process.env.NEXT_PUBLIC_VERCEL_URL}/landing-page-screenshot.png`,
+              alt: 'Developer DAO Academy',
+              type: 'image/png',
+            },
+          ],
+        }}
+        twitter={{
+          handle: '@devdao_academy',
+          site: '@devdao_academy',
+          cardType: 'summary_large_image',
+        }}
+        additionalLinkTags={[
+          {
+            rel: 'icon',
+            href: '/favicon/favicon.ico',
+          },
+        ]}
+      >
+        {children}
+      </NextSeo>
+    </>
+  )
+}
+
+export default PageSeoLayout

pages/_app.tsx

@@ -4,7 +4,6 @@ import Head from 'next/head'
 import { theme } from '@theme'
 import Header from '@components/Header'
 import Footer from '@components/footer/Footer'
-import { DefaultSeo } from 'next-seo'
 import { MDXProvider } from '@mdx-js/react'
 import Components from '@components/mdx/Components'
 import { Analytics } from '@vercel/analytics/react'
@@ -41,35 +40,6 @@ function MyApp({ Component, pageProps }: AppProps) {
         <meta name="msapplication-TileColor" content="#ffffff" />
         <meta name="theme-color" content="#000000" />
       </Head>
-      <DefaultSeo
-        openGraph={{
-          type: 'website',
-          locale: 'en_US',
-          url: `https://${process.env.NEXT_PUBLIC_VERCEL_URL}/landing-page-screenshot.png`,
-          site_name: 'Developer DAO Academy',
-          title: 'Developer DAO Academy',
-          description:
-            'Academy is an open-source education platform created by the Developer DAO.',
-          images: [
-            {
-              url: `https://${process.env.NEXT_PUBLIC_VERCEL_URL}/landing-page-screenshot.png`,
-              alt: 'Developer DAO Academy',
-              type: 'image/png',
-            },
-          ],
-        }}
-        twitter={{
-          handle: '@devdao_academy',
-          site: '@devdao_academy',
-          cardType: 'summary_large_image',
-        }}
-        additionalLinkTags={[
-          {
-            rel: 'icon',
-            href: '/favicon/favicon.ico',
-          },
-        ]}
-      />
       <Box p="1.25em" px="5%" mx={{ base: '2rem', md: '6rem', lg: '10rem' }}>
         <Header />
         <MDXProvider components={Components}>

pages/index.tsx

@@ -1,16 +1,13 @@
 import { Box } from '@chakra-ui/react'
 import type { NextPage } from 'next'
 import Hero from '@components/Hero'
+import PageSeoLayout from '@components/PageSeoLayout'
 
 const Home: NextPage = () => {
   return (
-    <div>
-      <main>
-        <Box as="main">
-          <Hero />
-        </Box>
-      </main>
-    </div>
+    <PageSeoLayout title="test" description="test">
+      <Hero />
+    </PageSeoLayout>
   )
 }