add <NextSeo /> component

Author: gregrickaby

pages/index.js

@@ -1,10 +1,24 @@
 import Layout from '@/components/common/Layout'
 import Hero from '@/components/molecules/Hero'
-import config from '@/functions/config'
+import {NextSeo} from 'next-seo'
 
 export default function HomePage() {
   return (
-    <Layout title={config.siteTitle} description={config.siteDescription}>
+    <Layout>
+      <NextSeo
+        title="Query from Yoast SEO"
+        description="Query from Yoast SEO"
+        openGraph={{
+          title: 'Query from Yoast SEO',
+          description: 'Query from Yoast SEO',
+          images: [
+            {
+              url: 'Query from Yoast SEO',
+              alt: 'Query from Yoast SEO'
+            }
+          ]
+        }}
+      />
       <Hero
         background="https://images.unsplash.com/photo-1513106021000-168e5f56609d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2560&q=70"
         title="Next.js Starter"

pages/posts/[[...slug]].js

@@ -1,7 +1,6 @@
 import getPostTypeStaticPaths from '@/api/wordpress/_global/getPostTypeStaticPaths'
 import getPostTypeStaticProps from '@/api/wordpress/_global/getPostTypeStaticProps'
 import Layout from '@/components/common/Layout'
-import {Info} from '@/components/molecules/Alert'
 import {BlogJsonLd, NextSeo} from 'next-seo'
 import Link from 'next/link'
 import PropTypes from 'prop-types'
@@ -21,37 +20,28 @@ export default function BlogPost({post, posts, archive}) {
   // TODO create generic archive component and move this check to `_app.js`.
   if (archive) {
     return (
-      <Layout title="Blog">
-        <NextSeo
-          title="Query from Yoast SEO"
-          description="Query from Yoast SEO"
-          openGraph={{
-            title: 'Query from Yoast SEO',
-            description: 'Query from Yoast SEO',
-            images: [
-              {
-                url: 'Query from Yoast SEO',
-                alt: 'Query from Yoast SEO'
-              }
-            ]
-          }}
-        />
-        <BlogJsonLd
-          url="Query from Yoast SEO"
-          title="Query from Yoast SEO"
-          images={['Query from Yoast SEO']}
-          datePublished="Query from Yoast SEO"
-          dateModified="Query from Yoast SEO"
-          authorName="Jane Blogs"
-          description="Query from Yoast SEO"
-        />
+      <Layout>
         <div className="container">
           <section>
             {!posts || !posts.length ? (
               <p>No posts found.</p>
             ) : (
               posts.map((post, index) => (
                 <>
+                  <NextSeo
+                    title="Query from Yoast SEO"
+                    description="Query from Yoast SEO"
+                    openGraph={{
+                      title: 'Query from Yoast SEO',
+                      description: 'Query from Yoast SEO',
+                      images: [
+                        {
+                          url: 'Query from Yoast SEO',
+                          alt: 'Query from Yoast SEO'
+                        }
+                      ]
+                    }}
+                  />
                   <article key={index}>
                     <Link href={post.uri}>
                       <a>
@@ -71,15 +61,31 @@ export default function BlogPost({post, posts, archive}) {
   }
 
   return (
-    <Layout title={post?.title} description={post?.excerpt}>
+    <Layout>
+      <NextSeo
+        title="Query from Yoast SEO"
+        description="Query from Yoast SEO"
+        openGraph={{
+          title: 'Query from Yoast SEO',
+          description: 'Query from Yoast SEO',
+          images: [
+            {
+              url: 'Query from Yoast SEO',
+              alt: 'Query from Yoast SEO'
+            }
+          ]
+        }}
+      />
+      <BlogJsonLd
+        url="Query from Yoast SEO"
+        title="Query from Yoast SEO"
+        images={['Query from Yoast SEO']}
+        datePublished="Query from Yoast SEO"
+        dateModified="Query from Yoast SEO"
+        authorName="Query from Yoast SEO"
+        description="Query from Yoast SEO"
+      />
       <div className="container">
-        <Info>
-          The content below is sourced from the WordPress REST-API.{' '}
-          <a href="https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation">
-            Learn more about SSG.
-          </a>
-        </Info>
-
         <section>
           <article>
             <h1 dangerouslySetInnerHTML={{__html: post?.title}} />