Added locale metadata for products and product page

pages/index.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react'
 import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
+import { getConfig } from '@lib/bigcommerce/api'
 import getAllProducts from '@lib/bigcommerce/api/operations/get-all-products'
 import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
 import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages'
@@ -12,19 +13,22 @@ export async function getStaticProps({
   preview,
   locale,
 }: GetStaticPropsContext) {
-  console.log('LOCALE', locale)
+  const config = getConfig({ locale })
 
   const { products: featuredProducts } = await getAllProducts({
     variables: { field: 'featuredProducts', first: 6 },
+    config,
   })
   const { products: bestSellingProducts } = await getAllProducts({
     variables: { field: 'bestSellingProducts', first: 6 },
+    config,
   })
   const { products: newestProducts } = await getAllProducts({
     variables: { field: 'newestProducts', first: 12 },
+    config,
   })
-  const { categories, brands } = await getSiteInfo()
-  const { pages } = await getAllPages()
+  const { categories, brands } = await getSiteInfo({ config })
+  const { pages } = await getAllPages({ config })
 
   return {
     props: {

pages/product/[slug].tsx

@@ -1,5 +1,10 @@
-import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
+import {
+  GetStaticPathsContext,
+  GetStaticPropsContext,
+  InferGetStaticPropsType,
+} from 'next'
 import { useRouter } from 'next/router'
+import { getConfig } from '@lib/bigcommerce/api'
 import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages'
 import getProduct from '@lib/bigcommerce/api/operations/get-product'
 import { Layout } from '@components/core'
@@ -8,9 +13,15 @@ import getAllProductPaths from '@lib/bigcommerce/api/operations/get-all-product-
 
 export async function getStaticProps({
   params,
+  locale,
 }: GetStaticPropsContext<{ slug: string }>) {
-  const { pages } = await getAllPages()
-  const { product } = await getProduct({ variables: { slug: params!.slug } })
+  const config = getConfig({ locale })
+
+  const { pages } = await getAllPages({ config })
+  const { product } = await getProduct({
+    variables: { slug: params!.slug },
+    config,
+  })
 
   if (!product) {
     throw new Error(`Product with slug '${params!.slug}' not found`)
@@ -22,11 +33,19 @@ export async function getStaticProps({
   }
 }
 
-export async function getStaticPaths() {
+export async function getStaticPaths({ locales }: GetStaticPathsContext) {
   const { products } = await getAllProductPaths()
 
   return {
-    paths: products.map((product) => `/product${product.node.path}`),
+    paths: locales
+      ? locales.reduce<string[]>((arr, locale) => {
+          // Add a product path for every locale
+          products.forEach((product) => {
+            arr.push(`/${locale}/product${product.node.path}`)
+          })
+          return arr
+        }, [])
+      : products.map((product) => `/product${product.node.path}`),
     // If your store has tons of products, enable fallback mode to improve build times!
     fallback: false,
   }