From 850ac55567eba01911a448f63ffcf497343fdb70 Mon Sep 17 00:00:00 2001
From: Christopher Angelo <angelo@angeloanan.xyz>
Date: Thu, 3 Mar 2022 21:17:38 +0700
Subject: [PATCH] feat: add `next-seo` and default config

---
 next-seo.config.js | 24 ++++++++++++++++++++++++
 package.json       |  1 +
 src/pages/_app.tsx | 13 ++++++++++---
 yarn.lock          |  5 +++++
 4 files changed, 40 insertions(+), 3 deletions(-)
 create mode 100644 next-seo.config.js

diff --git a/next-seo.config.js b/next-seo.config.js
new file mode 100644
index 0000000..6983f2c
--- /dev/null
+++ b/next-seo.config.js
@@ -0,0 +1,24 @@
+// @ts-check
+
+/**
+ * @type {import('next-seo').NextSeoProps}
+ */
+const defaultSEOConfig = {
+  title: "Angelo's NextJS Template",
+  titleTemplate: "%s | Angelo's NextJS Template",
+
+  openGraph: {
+    type: 'website',
+    locale: 'en_US',
+    url: process.env.SITE_URL ?? 'https://angeloanan.xyz',
+    site_name: "Angelo's NextJS Template"
+  },
+
+  twitter: {
+    handle: '@uwungelo',
+    site: '@uwungelo',
+    cardType: 'summary_large_image'
+  }
+}
+
+export default defaultSEOConfig
diff --git a/package.json b/package.json
index 1256011..7af22cc 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "autoprefixer": "^10.4.0",
     "next": "^12.1.0",
     "next-compose-plugins": "^2.2.1",
+    "next-seo": "^5.1.0",
     "postcss": "^8.4.7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 9f53819..e7b5c23 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -3,6 +3,9 @@ import '../style/globals.css'
 
 import type { NextPage } from 'next'
 import type { AppProps } from 'next/app'
+import { DefaultSeo } from 'next-seo'
+
+import SEOConfig from '../../next-seo.config'
 
 type CustomAppProps = AppProps & {
   Component: NextPage & {
@@ -14,9 +17,13 @@ function CustomApp({ Component, pageProps }: CustomAppProps) {
   return Component.disableLayout ? (
     <Component {...pageProps} />
   ) : (
-    <div className='stylized-bg min-h-screen'>
-      <Component {...pageProps} />
-    </div>
+    <>
+      <DefaultSeo {...SEOConfig} />
+
+      <div className='stylized-bg min-h-screen'>
+        <Component {...pageProps} />
+      </div>
+    </>
   )
 }
 
diff --git a/yarn.lock b/yarn.lock
index 7b7717c..aac35b4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1780,6 +1780,11 @@ next-compose-plugins@^2.2.1:
   resolved "https://registry.yarnpkg.com/next-compose-plugins/-/next-compose-plugins-2.2.1.tgz#020fc53f275a7e719d62521bef4300fbb6fde5ab"
   integrity sha512-OjJ+fV15FXO2uQXQagLD4C0abYErBjyjE0I0FHpOEIB8upw0hg1ldFP6cqHTJBH1cZqy96OeR3u1dJ+Ez2D4Bg==
 
+next-seo@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/next-seo/-/next-seo-5.1.0.tgz#aa9fd6249a11bf93e6da06fa2a6bc89268936edf"
+  integrity sha512-ampuQfNTOi1x+xtRIb6CZGunIo6rQXtMo2Tyu861d5GjJFIwfOXsA4lzCa4+e2rLkyXDyVpavNNUZWa3US9ELw==
+
 next-sitemap@^2.5.4:
   version "2.5.4"
   resolved "https://registry.yarnpkg.com/next-sitemap/-/next-sitemap-2.5.4.tgz#a48498d495b603043b5322878501cf4069b827ef"