Merge branch 'master' of github.com:okbel/e-comm-example

pages/[...pages].tsx

@@ -7,19 +7,24 @@ import { Layout, HTMLContent } from '@components/core'
 export async function getStaticProps({
   preview,
   params,
+  locale,
 }: GetStaticPropsContext<{ pages: string[] }>) {
   const { pages } = await getAllPages()
-  const slug = params?.pages.join('/')
+  const path = params?.pages.join('/')
+  const slug = locale ? `${locale}/${path}` : path
+
   const pageItem = pages.find((p) => (p.url ? getSlug(p.url) === slug : false))
   const data = pageItem && (await getPage({ variables: { id: pageItem.id! } }))
   const page = data?.page
 
   if (!page) {
+    // We throw to make sure this fails at build time as this is never expected to happen
     throw new Error(`Page with slug '${slug}' not found`)
   }
 
   return {
     props: { pages, page },
+    revalidate: 60 * 60, // Every hour
   }
 }
 

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'
@@ -8,18 +9,26 @@ import { Layout } from '@components/core'
 import { Grid, Marquee, Hero } from '@components/ui'
 import { ProductCard } from '@components/product'
 
-export async function getStaticProps({ preview }: GetStaticPropsContext) {
+export async function getStaticProps({
+  preview,
+  locale,
+}: GetStaticPropsContext) {
+  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,
   }