Update Next.js to 12 and switch to npm (#562)

* Update Commerce to Next.js 12

* Switch to npm

* Removed yarn

* Updated fetch type

* Fixed issue with BC deployment

README.md

@@ -105,11 +105,10 @@ Our commitment to Open Source can be found [here](https://vercel.com/oss).
 
 1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device.
 2. Create a new branch `git checkout -b MY_BRANCH_NAME`
-3. Install yarn: `npm install -g yarn`
+3. Install the dependencies: `npm i`
-4. Install the dependencies: `yarn`
+4. Duplicate `.env.template` and rename it to `.env.local`
-5. Duplicate `.env.template` and rename it to `.env.local`
+5. Add proper store values to `.env.local`
-6. Add proper store values to `.env.local`
+6. Run `npm run dev` to build and watch for code changes
-7. Run `yarn dev` to build and watch for code changes
 
 ## Work in progress
 

components/product/ProductCard/ProductCard.tsx

@@ -46,15 +46,17 @@ const ProductCard: FC<Props> = ({
               <span>{product.name}</span>
             </div>
             {product?.images && (
-              <Image
+              <div>
-                quality="85"
+                <Image
-                src={product.images[0]?.url || placeholderImg}
+                  quality="85"
-                alt={product.name || 'Product Image'}
+                  src={product.images[0]?.url || placeholderImg}
-                height={320}
+                  alt={product.name || 'Product Image'}
-                width={320}
+                  height={320}
-                layout="fixed"
+                  width={320}
-                {...imgProps}
+                  layout="fixed"
-              />
+                  {...imgProps}
+                />
+              </div>
             )}
           </>
         )}
@@ -80,16 +82,18 @@ const ProductCard: FC<Props> = ({
             )}
             <div className={s.imageContainer}>
               {product?.images && (
-                <Image
+                <div>
-                  alt={product.name || 'Product Image'}
+                  <Image
-                  className={s.productImage}
+                    alt={product.name || 'Product Image'}
-                  src={product.images[0]?.url || placeholderImg}
+                    className={s.productImage}
-                  height={540}
+                    src={product.images[0]?.url || placeholderImg}
-                  width={540}
+                    height={540}
-                  quality="85"
+                    width={540}
-                  layout="responsive"
+                    quality="85"
-                  {...imgProps}
+                    layout="responsive"
-                />
+                    {...imgProps}
+                  />
+                </div>
               )}
             </div>
           </>
@@ -110,16 +114,18 @@ const ProductCard: FC<Props> = ({
             />
             <div className={s.imageContainer}>
               {product?.images && (
-                <Image
+                <div>
-                  alt={product.name || 'Product Image'}
+                  <Image
-                  className={s.productImage}
+                    alt={product.name || 'Product Image'}
-                  src={product.images[0]?.url || placeholderImg}
+                    className={s.productImage}
-                  height={540}
+                    src={product.images[0]?.url || placeholderImg}
-                  width={540}
+                    height={540}
-                  quality="85"
+                    width={540}
-                  layout="responsive"
+                    quality="85"
-                  {...imgProps}
+                    layout="responsive"
-                />
+                    {...imgProps}
+                  />
+                </div>
               )}
             </div>
           </>

components/product/ProductSlider/ProductSlider.module.css

@@ -13,9 +13,7 @@
 }
 
 .thumb {
-  @apply transition-transform transition-colors
+  @apply overflow-hidden inline-block cursor-pointer h-full;
-  ease-linear duration-75 overflow-hidden inline-block
-  cursor-pointer h-full;
   width: 125px;
   width: calc(100% / 3);
 }
@@ -48,11 +46,6 @@
 @screen md {
   .thumb:hover {
     transform: scale(1.02);
-    background-color: rgba(255, 255, 255, 0.08);
-  }
-
-  .thumb.selected {
-    @apply bg-white;
   }
 
   .album {

components/product/ProductView/ProductView.module.css

@@ -17,16 +17,15 @@
 }
 
 .imageContainer {
-  @apply text-center;
+  @apply text-center h-full relative;
 }
 
-.imageContainer > div,
+.imageContainer > span {
-.imageContainer > div > div {
+  height: 100% !important;
-  @apply h-full;
 }
 
 .sliderContainer .img {
-  @apply w-full h-auto max-h-full object-cover;
+  @apply w-full h-full max-h-full object-cover;
 }
 
 .button {

components/product/ProductView/ProductView.tsx

@@ -58,7 +58,11 @@ const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
             )}
           </div>
 
-          <ProductSidebar key={product.id} product={product} className={s.sidebar} />
+          <ProductSidebar
+            key={product.id}
+            product={product}
+            className={s.sidebar}
+          />
         </div>
         <hr className="mt-7 border-accent-2" />
         <section className="py-12 px-6 mb-10">

components/wishlist/WishlistCard/WishlistCard.tsx

@@ -62,12 +62,14 @@ const WishlistCard: FC<Props> = ({ product }) => {
   return (
     <div className={cn(s.root, { 'opacity-75 pointer-events-none': removing })}>
       <div className={`col-span-3 ${s.productBg}`}>
-        <Image
+        <div>
-          src={product.images[0]?.url || placeholderImg}
+          <Image
-          width={400}
+            src={product.images[0]?.url || placeholderImg}
-          height={400}
+            width={400}
-          alt={product.images[0]?.alt || 'Product Image'}
+            height={400}
-        />
+            alt={product.images[0]?.alt || 'Product Image'}
+          />
+        </div>
       </div>
 
       <div className="col-span-7">

framework/bigcommerce/api/utils/fetch-store-api.ts

@@ -1,11 +1,11 @@
-import type { RequestInit, Response } from '@vercel/fetch'
+import type { FetchOptions, Response } from '@vercel/fetch'
 import type { BigcommerceConfig } from '../index'
 import { BigcommerceApiError, BigcommerceNetworkError } from './errors'
 import fetch from './fetch'
 
 const fetchStoreApi =
   <T>(getConfig: () => BigcommerceConfig) =>
-  async (endpoint: string, options?: RequestInit): Promise<T> => {
+  async (endpoint: string, options?: FetchOptions): Promise<T> => {
     const config = getConfig()
     let res: Response
 
@@ -19,7 +19,7 @@ const fetchStoreApi =
           'X-Auth-Client': config.storeApiClientId,
         },
       })
-    } catch (error) {
+    } catch (error: any) {
       throw new BigcommerceNetworkError(
         `Fetch to Bigcommerce failed: ${error.message}`
       )

framework/bigcommerce/api/utils/fetch.ts

@@ -1,3 +1,3 @@
-import zeitFetch from '@vercel/fetch'
+import vercelFetch from '@vercel/fetch'
 
-export default zeitFetch()
+export default vercelFetch()

framework/commerce/api/index.ts

@@ -1,5 +1,5 @@
 import type { NextApiHandler } from 'next'
-import type { RequestInit, Response } from '@vercel/fetch'
+import type { FetchOptions, Response } from '@vercel/fetch'
 import type { APIEndpoint, APIHandler } from './utils/types'
 import type { CartSchema } from '../types/cart'
 import type { CustomerSchema } from '../types/customer'
@@ -160,7 +160,7 @@ export interface CommerceAPIConfig {
   fetch<Data = any, Variables = any>(
     query: string,
     queryData?: CommerceAPIFetchOptions<Variables>,
-    fetchOptions?: RequestInit
+    fetchOptions?: FetchOptions
   ): Promise<GraphQLFetcherResult<Data>>
 }
 
@@ -170,7 +170,7 @@ export type GraphQLFetcher<
 > = (
   query: string,
   queryData?: CommerceAPIFetchOptions<Variables>,
-  fetchOptions?: RequestInit
+  fetchOptions?: FetchOptions
 ) => Promise<Data>
 
 export interface GraphQLFetcherResult<Data = any> {

next-env.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -5,7 +5,7 @@
     "dev": "NODE_OPTIONS='--inspect' next dev",
     "build": "next build",
     "start": "next start",
-    "analyze": "BUNDLE_ANALYZE=both yarn build",
+    "analyze": "BUNDLE_ANALYZE=both next build",
     "lint": "next lint",
     "prettier-fix": "prettier --write .",
     "find:unused": "npx next-unused",
@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@react-spring/web": "^9.2.1",
-    "@vercel/fetch": "^6.1.0",
+    "@vercel/fetch": "^6.1.1",
     "autoprefixer": "^10.2.6",
     "body-scroll-lock": "^3.1.5",
     "classnames": "^2.3.1",
@@ -33,7 +33,7 @@
     "lodash.debounce": "^4.0.8",
     "lodash.random": "^3.2.0",
     "lodash.throttle": "^4.1.1",
-    "next": "^11.0.0",
+    "next": "^12.0.3",
     "next-seo": "^4.26.0",
     "next-themes": "^0.0.14",
     "postcss": "^8.3.5",