fix: [PLATO-338] mui icons

- Fixing an issue with mui/material-icons breaking Netlify's deploy opennextjs/opennextjs-netlify#1174 (comment)
- Made some small changes to the image component, making the alt property more intuitive
- Fixed some faulty notFound returns in our slug page
- Hard locked the current Next version
- Updated our Node version to 18

Author: mattvanvoorst-contentful

.nvmrc

@@ -1 +1 @@
-v16.18.1
+v18.12.1

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "version": "0.0.1",
   "engines": {
-    "node": "16.18.1",
+    "node": "18.12.1",
     "npm": "Please use Yarn"
   },
   "scripts": {
@@ -47,7 +47,7 @@
     "graphql": "^16.5.0",
     "intersection-observer": "^0.12.2",
     "lodash": "^4.17.21",
-    "next": "^12.3.1",
+    "next": "12.3.1",
     "next-compose-plugins": "^2.2.1",
     "next-i18next": "^12.0.1",
     "next-pwa": "^5.6.0",

src/components/features/ctf-components/ctf-asset/ctf-asset.tsx

@@ -27,7 +27,7 @@ export const CtfAsset = (props: CtfAssetPropsInterface) => {
       <CtfImage
         height={height || undefined}
         width={width || undefined}
-        title={title || ''}
+        alt={title || ''}
         src={url}
         showDescription={
           ['quote', 'product-table', 'info-block', 'duplex'].includes(layout.parent) === true

src/components/features/ctf-components/ctf-duplex/ctf-duplex.tsx

@@ -139,7 +139,7 @@ const DuplexImage = (props: DuplexFieldsFragment) => {
           <CtfImage
             className={clsx([classes.image, imageStyle === 'fixed' && classes.imageFull])}
             src={`${image.url}?w=600`}
-            title={image.description || ''}
+            alt={image.description || ''}
             layout="responsive"
             width={image.width || undefined}
             height={image.height || undefined}

src/components/features/ctf-components/ctf-footer/ctf-footer.tsx

@@ -1,4 +1,7 @@
-import { Twitter, Facebook, LinkedIn, Instagram } from '@mui/icons-material';
+import Facebook from '@mui/icons-material/Facebook';
+import Instagram from '@mui/icons-material/Instagram';
+import LinkedIn from '@mui/icons-material/LinkedIn';
+import Twitter from '@mui/icons-material/Twitter';
 import { Theme, Container, Typography } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import { useTranslation } from 'next-i18next';

src/components/features/ctf-components/ctf-image/ctf-image.tsx

@@ -11,7 +11,6 @@ export const CtfImage = ({
   src,
   description,
   showDescription = true,
-  title = '',
   width,
   height,
   layout,
@@ -39,7 +38,6 @@ export const CtfImage = ({
           setLoaded(true);
         }}
         src={src}
-        alt={title}
         width={width}
         height={height}
         layout={layout}

src/components/templates/header/header.tsx

@@ -1,4 +1,4 @@
-import { Menu } from '@mui/icons-material';
+import Menu from '@mui/icons-material/Menu';
 import { AppBar, Container, IconButton, Theme, Toolbar, Box } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import { useTranslation } from 'next-i18next';

src/pages/[slug].tsx

@@ -64,18 +64,14 @@ export const getServerSideProps = async ({ locale, params }: CustomNextPageConte
 
       if (!__typename)
         return {
-          props: {
-            notFound: true,
-          },
+          notFound: true,
         };
 
       const query = prefetchMap?.[__typename];
 
       if (!query)
         return {
-          props: {
-            notFound: true,
-          },
+          notFound: true,
         };
 
       const data: PrefetchMappingTypeFetcher = await query.fetcher({

yarn.lock

@@ -6115,7 +6115,7 @@ next-pwa@^5.6.0:
     workbox-webpack-plugin "^6.5.4"
     workbox-window "^6.5.4"
 
-next@^12.3.1:
+[email protected]:
   version "12.3.1"
   resolved "https://registry.yarnpkg.com/next/-/next-12.3.1.tgz#127b825ad2207faf869b33393ec8c75fe61e50f1"
   integrity sha512-l7bvmSeIwX5lp07WtIiP9u2ytZMv7jIeB8iacR28PuUEFG5j0HGAPnMqyG5kbZNBG2H7tRsrQ4HCjuMOPnANZw==