feat: SEO! 🎉

next-seo.config.js

@@ -0,0 +1,20 @@
+export default {
+  openGraph: {
+    type: 'website',
+    locale: 'en_US',
+    url: 'https://jackmerrill.com/',
+    site_name: 'Jack Merrill',
+    description: 'Fullstack Developer and Graphic/UI designer.',
+    images: [
+      {
+        url: 'https://jackmerrill.com/img/designs/PersonalLogo.png',
+        alt: 'Jack Merrill Logo'
+      }
+    ]
+  },
+  twitter: {
+    handle: '@jack__merrill',
+    site: '@jack__merrill',
+    cardType: 'summary_large_image',
+  },
+};

package.json

@@ -11,6 +11,7 @@
     "framer-motion": "^4.1.2",
     "next": "latest",
     "next-page-transitions": "^1.0.0-beta.2",
+    "next-seo": "^4.23.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "tailwindcss-filters": "^3.0.0"

pages/_app.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { AppProps } from 'next/app'
-
+import SEO from '../next-seo.config';
+import { DefaultSeo } from 'next-seo';
 import 'tailwindcss/tailwind.css'
 import { useRouter } from 'next/dist/client/router';
 import Navbar from '../components/Navbar';
@@ -33,6 +34,7 @@ function MyApp({ Component, pageProps }: AppProps) {
           { label: 'My Work', href: '#projects' },
           { label: 'Designs', href: '#designs' },
         ]} />
+        <DefaultSeo {...SEO}/>
         <Component {...pageProps} />
         <Footer />
       </main>

yarn.lock

@@ -1581,6 +1581,11 @@ next-page-transitions@^1.0.0-beta.2:
     prop-types "^15.6.1"
     react-transition-group "^2.3.1"
 
+next-seo@^4.23.0:
+  version "4.23.0"
+  resolved "https://registry.yarnpkg.com/next-seo/-/next-seo-4.23.0.tgz#24ef200e9faf0489ff1095f63b06adc21187db4c"
+  integrity sha512-/yTeeUT+zFTsrpP8iigwiwsj+HyT+ks1G27mgfnkKQBrFz9uph6Bot4nDrwfICgjvdLt2Zdve6okAgRUmhm+/g==
+
 next@latest:
   version "10.1.2"
   resolved "https://registry.yarnpkg.com/next/-/next-10.1.2.tgz#2c508cc2982077f0bad6863be020c10c1d059970"