klaviyo, emotion cache, robots, mui update

components/product/ProductView/ProductView.tsx

@@ -81,7 +81,7 @@ const ProductView: FC<Props> = ({ product }) => {
           description: product.description,
           images: [
             {
-              url: product.images[0]?.url!,
+              url: product.images[0]?.small!,
               width: 800,
               height: 600,
               alt: product.name,
@@ -129,7 +129,7 @@ const ProductView: FC<Props> = ({ product }) => {
           </section>
           <div>
             <Button
-              aria-label="Add to Cart"
+              aria-label="Добави в количката"
               type="button"
               className={s.button}
               onClick={addToCart}

config/environment.ts

@@ -1,5 +1,4 @@
 export function isProd() {
   const env = process.env.NEXT_PUBLIC_ENV
-  console.log(`isProd: ${env}`)
   return env === 'production'
 }

lib/emotion/createEmotionCache.ts

@@ -0,0 +1,7 @@
+import createCache from '@emotion/cache'
+
+const createEmotionCache = () => {
+  return createCache({ key: 'css' })
+}
+
+export default createEmotionCache

lib/facebookPixel/FacebookPixel.tsx

@@ -27,6 +27,8 @@ export const track = (name: StandardEvents, options = {}) => {
 }
 
 export const FacebookPixel: FC = () => {
+  if (!isProd()) return null
+
   return (
     <Script
       id="fb-pixel"

lib/googleAnalytics/GoogleAnalytics.tsx

@@ -1,7 +1,10 @@
 import React, { FC } from 'react'
 import Script from 'next/script'
+import { isProd } from '@config/environment'
 
 const GoogleAnalytics: FC = () => {
+  if (!isProd()) return null
+
   return (
     <>
       <Script

lib/klaviyo/KlaviyoSignup.tsx

@@ -0,0 +1,20 @@
+import type { FC } from 'react'
+import { isProd } from '@config/environment'
+import Script from 'next/script'
+
+type KlaviyoSignupProps = {}
+
+const KlaviyoSignup: FC<KlaviyoSignupProps> = () => {
+  if (!isProd()) return null
+
+  return (
+    <Script
+      id="klaviyo-signup"
+      async
+      type="text/javascript"
+      src="https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=ReJ3p8"
+    />
+  )
+}
+
+export default KlaviyoSignup

lib/klaviyo/index.ts

@@ -0,0 +1 @@
+export { default as KlaviyoSignup } from './KlaviyoSignup'

next.config.js

@@ -1,14 +1,5 @@
 const commerce = require('./commerce.config.json')
-const {
-  withCommerceConfig,
-  getProviderName,
-} = require('./framework/commerce/config')
-
-const provider = commerce.provider || getProviderName()
-const isBC = provider === 'bigcommerce'
-const isShopify = provider === 'shopify'
-const isSwell = provider === 'swell'
-const isVendure = provider === 'vendure'
+const { withCommerceConfig } = require('./framework/commerce/config')
 
 module.exports = withCommerceConfig({
   env: {
@@ -26,42 +17,12 @@ module.exports = withCommerceConfig({
     locales: ['bg-BG'],
     defaultLocale: 'bg-BG',
   },
-  rewrites() {
-    return [
-      (isBC || isShopify || isSwell || isVendure) && {
-        source: '/checkout',
-        destination: '/api/bigcommerce/checkout',
-      },
-      // The logout is also an action so this route is not required, but it's also another way
-      // you can allow a logout!
-      isBC && {
-        source: '/logout',
-        destination: '/api/bigcommerce/customers/logout?redirect_to=/',
-      },
-      // For Vendure, rewrite the local api url to the remote (external) api url. This is required
-      // to make the session cookies work.
-      isVendure &&
-        process.env.NEXT_PUBLIC_VENDURE_LOCAL_URL && {
-          source: `${process.env.NEXT_PUBLIC_VENDURE_LOCAL_URL}/:path*`,
-          destination: `${process.env.NEXT_PUBLIC_VENDURE_SHOP_API_URL}/:path*`,
-        },
-      // Rewrites for /search
-      {
-        source: '/search/designers/:name',
-        destination: '/search',
+  experimental: {
+    emotion: true,
+    modularizeImports: {
+      '@mui': {
+        transform: '@mui/material/{{Member}}',
       },
-      {
-        source: '/search/designers/:name/:category',
-        destination: '/search',
-      },
-      {
-        // This rewrite will also handle `/search/designers`
-        source: '/search/:category',
-        destination: '/search',
-      },
-    ].filter((x) => x)
+    },
   },
 })
-
-// Don't delete this console log, useful to see the commerce config in Vercel deployments
-console.log('next.config.js', JSON.stringify(module.exports, null, 2))

package.json

@@ -25,11 +25,13 @@
     "@artsy/fresnel": "^1.7.0",
     "@contentful/rich-text-react-renderer": "^15.1.0",
     "@contentful/rich-text-types": "^15.1.0",
-    "@emotion/react": "^11.4.1",
-    "@emotion/styled": "^11.3.0",
+    "@emotion/cache": "^11.7.1",
+    "@emotion/react": "^11.9.0",
+    "@emotion/server": "^11.4.0",
+    "@emotion/styled": "^11.8.1",
     "@hookform/resolvers": "^2.8.0",
-    "@mui/icons-material": "^5.0.1",
-    "@mui/material": "^5.0.1",
+    "@mui/icons-material": "^5.6.2",
+    "@mui/material": "5.6.4",
     "@reach/portal": "^0.11.2",
     "@react-google-maps/api": "^2.2.0",
     "@vercel/fetch": "^6.1.0",
@@ -50,11 +52,10 @@
     "lodash.debounce": "^4.0.8",
     "lodash.random": "^3.2.0",
     "lodash.throttle": "^4.1.1",
-    "next": "^12.1.0",
+    "next": "^12.1.6",
     "next-seo": "^4.11.0",
     "next-themes": "^0.0.4",
     "photoswipe": "^4.1.3",
-    "prettier": "^2.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.2",
     "react-hook-form": "^7.13.0",
@@ -66,7 +67,6 @@
     "sharp": "^0.29.3",
     "swr": "^1.2.2",
     "tabbable": "^5.1.5",
-    "typescript": "^4.0.3",
     "yup": "^0.32.9"
   },
   "devDependencies": {
@@ -75,7 +75,7 @@
     "@graphql-codegen/typescript": "^1.19.0",
     "@graphql-codegen/typescript-operations": "^1.17.13",
     "@manifoldco/swagger-to-ts": "^2.1.0",
-    "@next/bundle-analyzer": "^10.0.1",
+    "@next/bundle-analyzer": "^12.1.6",
     "@types/body-scroll-lock": "^2.6.1",
     "@types/classnames": "^2.2.10",
     "@types/cookie": "^0.4.0",
@@ -102,7 +102,9 @@
     "postcss-flexbugs-fixes": "^4.2.1",
     "postcss-nesting": "^7.0.1",
     "postcss-preset-env": "^6.7.0",
-    "tailwindcss": "^3.0.16"
+    "prettier": "^2.2.1",
+    "tailwindcss": "^3.0.16",
+    "typescript": "^4.0.3"
   },
   "husky": {
     "hooks": {

pages/_app.tsx

@@ -16,6 +16,12 @@ import { GRAPHQL_URL } from '@config/index'
 import { CartProvider } from '@context/CartContext'
 import { isProd } from '@config/environment'
 import GoogleAnalytics from '@lib/googleAnalytics/GoogleAnalytics'
+import { CacheProvider, EmotionCache } from '@emotion/react'
+import createEmotionCache from '@lib/emotion/createEmotionCache'
+
+interface MyAppProps extends AppProps {
+  emotionCache?: EmotionCache
+}
 
 const Noop: FC = ({ children }) => <>{children}</>
 
@@ -24,14 +30,18 @@ const client = new ApolloClient({
   cache: new InMemoryCache(),
 })
 
-export default function MyApp({ Component, pageProps }: AppProps) {
+const clientSideEmotionCache = createEmotionCache()
+
+export default function MyApp({
+  Component,
+  pageProps,
+  emotionCache = clientSideEmotionCache,
+}: MyAppProps) {
   const Layout = (Component as any).Layout || Noop
   const router = useRouter()
 
   useEffect(() => {
-    if (isProd()) {
-      pageView()
-    }
+    pageView()
 
     const handleRouteChange = (url: string) => {
       if (isProd()) {
@@ -53,24 +63,21 @@ export default function MyApp({ Component, pageProps }: AppProps) {
 
   return (
     <>
-      {isProd() && (
-        <>
-          {() => console.log('running in production')}
-          <GoogleAnalytics />
-          <FacebookPixel />
-        </>
-      )}
+      <GoogleAnalytics />
+      <FacebookPixel />
       <Head>
         <title>Airfit | Спортно оборудване за дома</title>
       </Head>
       <UIProvider>
         <ApolloProvider client={client}>
           <CartProvider>
-            <ThemeProvider theme={theme}>
-              <Layout pageProps={pageProps}>
-                <Component {...pageProps} />
-              </Layout>
-            </ThemeProvider>
+            <CacheProvider value={emotionCache}>
+              <ThemeProvider theme={theme}>
+                <Layout pageProps={pageProps}>
+                  <Component {...pageProps} />
+                </Layout>
+              </ThemeProvider>
+            </CacheProvider>
           </CartProvider>
         </ApolloProvider>
       </UIProvider>

pages/_document.tsx

@@ -2,8 +2,8 @@ import Document, { Head, Html, Main, NextScript } from 'next/document'
 import React from 'react'
 import { mediaStyles } from '@components/common/MediaQueries'
 import { isProd } from '@config/environment'
-// eslint-disable-next-line @next/next/no-script-in-document
-import Script from 'next/script'
+import createEmotionCache from '@lib/emotion/createEmotionCache'
+import createEmotionServer from '@emotion/server/create-instance'
 
 class MyDocument extends Document {
   render() {
@@ -37,4 +37,36 @@ class MyDocument extends Document {
   }
 }
 
+MyDocument.getInitialProps = async (ctx) => {
+  const originalRenderPage = ctx.renderPage
+
+  const cache = createEmotionCache()
+  const { extractCriticalToChunks } = createEmotionServer(cache)
+
+  ctx.renderPage = () =>
+    originalRenderPage({
+      // eslint-disable-next-line react/display-name
+      enhanceApp: (App: any) => (props) =>
+        <App emotionCache={cache} {...props} />,
+    })
+
+  const initialProps = await Document.getInitialProps(ctx)
+  const emotionStyles = extractCriticalToChunks(initialProps.html)
+  const emotionStyleTags = emotionStyles.styles.map((style) => (
+    <style
+      data-emotion={`${style.key} ${style.ids.join(' ')}`}
+      key={style.key}
+      dangerouslySetInnerHTML={{ __html: style.css }}
+    />
+  ))
+
+  return {
+    ...initialProps,
+    styles: [
+      ...React.Children.toArray(initialProps.styles),
+      ...emotionStyleTags,
+    ],
+  }
+}
+
 export default MyDocument

pages/index.tsx

@@ -1,11 +1,11 @@
-import Script from 'next/script'
 import { Layout } from '@components/common'
 import { Hero } from '@components/ui'
 import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
 
 import commerce from '@lib/api/commerce'
 import Banner from '@components/ui/Banner/Banner'
 import { ProductsList, Slideshow } from '@components/landingPage'
+import { KlaviyoSignup } from '@lib/klaviyo'
 
 export async function getStaticProps({
   preview,
@@ -17,7 +17,6 @@ export async function getStaticProps({
     variables: { first: 25 },
     config,
     preview,
-    // Saleor provider only
     ...({ featured: true } as any),
   })
   const pagesPromise = commerce.getAllPages({ config, preview })
@@ -53,12 +52,7 @@ export default function Home({
 }: InferGetStaticPropsType<typeof getStaticProps>) {
   return (
     <>
-      <Script
-        id="klaviyo-signup"
-        async
-        type="text/javascript"
-        src="https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=ReJ3p8"
-      />
+      <KlaviyoSignup />
       <Banner />
       <ProductsList products={products} />
       <Slideshow products={featuredProducts} />