More changes

components/product/ProductView/ProductView.tsx

@@ -7,7 +7,7 @@ import { Colors } from '@components/ui/types'
 import type { Product } from '@lib/bigcommerce/api/operations/get-product'
 import useAddItem from '@lib/bigcommerce/cart/use-add-item'
 import { useUI } from '@components/ui/context'
-
+import { NextSeo } from 'next-seo'
 interface Props {
   className?: string
   children?: any
@@ -44,6 +44,23 @@ const ProductView: FC<Props> = ({ product, className }) => {
 
   return (
     <Container>
+      <NextSeo
+        title={product.name}
+        description={product.description}
+        openGraph={{
+          type: 'website',
+          title: product.name,
+          description: product.description,
+          images: [
+            {
+              url: product.images.edges?.[0]?.node.urlXL || '',
+              width: 800,
+              height: 600,
+              alt: product.name,
+            },
+          ],
+        }}
+      />
       <div className="relative flex flex-row items-start overflow-hidden fit my-12">
         <div className="absolute top-0 left-0 z-50">
           <h1 className="px-6 py-2 bg-violet text-white font-bold text-3xl">

config.json

@@ -0,0 +1,18 @@
+{
+  "seo": {
+    "title": "ACME Storefront | Powered by Next.js Commerce",
+    "titleTemplate": "%s - ACME Storefront",
+    "description": "Next.js Commerce -> https://www.nextjs.org/commerce",
+    "openGraph": {
+      "type": "website",
+      "locale": "en_IE",
+      "url": "https://nextjs.org/commerce",
+      "site_name": "Next.js Commerce"
+    },
+    "twitter": {
+      "handle": "@nextjs",
+      "site": "@nextjs",
+      "cardType": "summary_large_image"
+    }
+  }
+}

package.json

@@ -26,6 +26,7 @@
     "js-cookie": "^2.2.1",
     "lodash.debounce": "^4.0.8",
     "next": "^9.5.4",
+    "next-seo": "^4.11.0",
     "next-themes": "^0.0.4",
     "postcss-nesting": "^7.0.1",
     "react": "^16.13.1",

pages/_app.tsx

@@ -1,17 +1,20 @@
 import { FC } from 'react'
+import { DefaultSeo } from 'next-seo'
 import type { AppProps } from 'next/app'
-import { SSRProvider, OverlayProvider } from 'react-aria'
 import { ThemeProvider } from 'next-themes'
+import { SSRProvider, OverlayProvider } from 'react-aria'
 import '@assets/global.css'
 import '@assets/tailwind.css'
 import '@assets/utils.css'
-
+import config from '../config.json'
 const Noop: FC = ({ children }) => <>{children}</>
 
 export default function MyApp({ Component, pageProps }: AppProps) {
   const Layout = (Component as any).Layout || Noop
 
   return (
+    <>
+      <DefaultSeo {...config.seo} />
       <ThemeProvider>
         <SSRProvider>
           <OverlayProvider>
@@ -21,5 +24,6 @@ export default function MyApp({ Component, pageProps }: AppProps) {
           </OverlayProvider>
         </SSRProvider>
       </ThemeProvider>
+    </>
   )
 }

yarn.lock

@@ -5676,6 +5676,11 @@ neo-async@^2.6.2:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
+next-seo@^4.11.0:
+  version "4.11.0"
+  resolved "https://registry.yarnpkg.com/next-seo/-/next-seo-4.11.0.tgz#b4f160414b49e6e3dc7791df25e29b50550ebb67"
+  integrity sha512-JrrGA+wD20ArI5jTqbLE2jipmA5VCCcjBlb1ZI2lKktd7lCXNs/IIvwkNfJPPK0vFp/ewwylA6kO5CyX2fflig==
+
 next-themes@^0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.0.4.tgz#fb06a9d03887201dd8fdd75fc1c84f406988f61e"