Update next 13.5.4, react 18.2, react-dom 18, react-player 2.13

components/common/Link.tsx

@@ -36,9 +36,9 @@ export const NextLinkComposed = React.forwardRef<HTMLAnchorElement, NextLinkComp
         shallow={shallow}
         passHref
         locale={locale}
-      >
-        <Anchor ref={ref} {...other} />
-      </NextLink>
+        ref={ref}
+        {...other}
+      />
     );
   },
 );
@@ -89,6 +89,7 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(props,
     <MuiLink
       component={NextLinkComposed}
       linkAs={linkAs}
+      passHref={true}
       className={className}
       ref={ref}
       to={href}

components/layout/Footer.tsx

@@ -105,8 +105,8 @@ const Footer = () => {
 
           return (
             <Box pr="2em" key={`${partner.name}_footer`}>
-              <Link href={partner.website} sx={logoContainerStyle}>
-                <Image alt={tS(partner.logoAlt)} src={partner.logo} />
+              <Link href={partner.website} sx={logoContainerStyle} position="relative">
+                <Image fill={true} alt={tS(partner.logoAlt)} src={partner.logo} />
               </Link>
               <Typography variant="body2" component="p">
                 {tS(partner.footerLine1)}

components/layout/Header.tsx

@@ -77,11 +77,7 @@ const Header = (props: HeaderProps) => {
   } = props;
 
   const tS = useTranslations('Shared');
-  const imageAltText = translatedImageAlt
-    ? translatedImageAlt
-    : imageAlt
-    ? tS(imageAlt)
-    : undefined;
+  const imageAltText = translatedImageAlt ? translatedImageAlt : imageAlt ? tS(imageAlt) : '';
 
   return (
     <Container sx={headerContainerStyles}>

components/layout/PartnerAdminHeader.tsx

@@ -33,7 +33,7 @@ const PartnerAdminHeader = (props: PartnerAdminHeaderProps) => {
         {title}
       </Typography>
       {partnerLogoAlt && partnerLogoSrc && (
-        <Image alt={tS(partnerLogoAlt)} src={partnerLogoSrc} width="200px" />
+        <Image alt={tS(partnerLogoAlt)} src={partnerLogoSrc} width={200} />
       )}
     </Container>
   );

components/storyblok/StoryblokAudio.tsx

@@ -1,6 +1,8 @@
 import { Box } from '@mui/system';
-import ReactPlayer from 'react-player/lazy';
+import dynamic from 'next/dynamic';
 import { richtextContentStyle } from '../../styles/common';
+// See React Player Hydration issue https://github.com/cookpete/react-player/issues/1474
+const ReactPlayer = dynamic(() => import('react-player/lazy'), { ssr: false });
 
 const audioContainerStyle = {
   position: 'relative',

components/storyblok/StoryblokVideo.tsx

@@ -1,6 +1,8 @@
 import { Box } from '@mui/system';
-import ReactPlayer from 'react-player/lazy';
+import dynamic from 'next/dynamic';
 import { richtextContentStyle } from '../../styles/common';
+// See React Player Hydration issue https://github.com/cookpete/react-player/issues/1474
+const ReactPlayer = dynamic(() => import('react-player/lazy'), { ssr: false });
 
 const videoContainerStyle = {
   position: 'relative',

components/video/Video.tsx

@@ -1,9 +1,12 @@
-import { Theme } from '@mui/material';
+import { debounce, Theme } from '@mui/material';
 import Box from '@mui/material/Box';
 import { SxProps } from '@mui/system';
+import dynamic from 'next/dynamic';
 import { Dispatch, SetStateAction, useRef, useState } from 'react';
-import ReactPlayer from 'react-player/lazy';
+import { OnProgressProps } from 'react-player/base';
 import logEvent from '../../utils/logEvent';
+// See React Player Hydration issue https://github.com/cookpete/react-player/issues/1474
+const ReactPlayer = dynamic(() => import('react-player/lazy'), { ssr: false });
 
 const videoContainerStyle = {
   position: 'relative',
@@ -27,8 +30,9 @@ interface VideoProps {
 const Video = (props: VideoProps) => {
   const { url, eventData, eventPrefix, containerStyles, setVideoStarted } = props;
   const [videoDuration, setVideoDuration] = useState<number>(0);
-  const player = useRef<ReactPlayer>(null);
+  const [videoTimePlayed, setVideoTimePlayed] = useState<number>(0);
 
+  const player = useRef<typeof ReactPlayer>(null);
   const videoStarted = () => {
     setVideoStarted && setVideoStarted(true);
     if (player.current) {
@@ -47,13 +51,12 @@ const Video = (props: VideoProps) => {
 
   const videoPausedOrPlayed = (played: boolean) => {
     if (player.current) {
-      const currentTime = Math.round(player.current.getCurrentTime());
-      const playedPercentage = Math.round((currentTime / videoDuration) * 100);
+      const playedPercentage = Math.round((videoTimePlayed / videoDuration) * 100);
 
       logEvent(played ? `${eventPrefix}_VIDEO_PLAYED` : `${eventPrefix}_VIDEO_PAUSED`, {
         ...eventData,
         video_duration: videoDuration,
-        video_current_time: currentTime,
+        video_current_time: videoTimePlayed,
         video_current_percentage: playedPercentage,
       });
 
@@ -65,6 +68,12 @@ const Video = (props: VideoProps) => {
       }
     }
   };
+  const handleProgress: ((state: OnProgressProps) => void) | undefined = debounce(
+    (state: OnProgressProps) => {
+      setVideoTimePlayed(state.playedSeconds);
+    },
+    300,
+  );
 
   const containerStyle = {
     ...containerStyles,
@@ -82,6 +91,7 @@ const Video = (props: VideoProps) => {
           onPause={() => videoPausedOrPlayed(false)}
           onPlay={() => videoPausedOrPlayed(true)}
           onEnded={videoEnded}
+          onProgress={handleProgress}
           style={videoStyle}
           width="100%"
           height="100%"

next-env.d.ts

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

package.json

@@ -29,15 +29,15 @@
     "gemoji": "^8.1.0",
     "js-cookie": "^3.0.1",
     "material-ui-phone-number": "^3.0.0",
-    "next": "^12.2.5",
-    "next-intl": "^2.0.5",
+    "next": "^v13.5.4",
+    "next-intl": "^2.20.0",
     "next-redux-wrapper": "^8.1.0",
     "phone": "^3.1.33",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "react-cookie-consent": "^8.0.1",
-    "react-dom": "17.0.2",
+    "react-dom": "18.0.0",
     "react-hotjar": "^5.0.0",
-    "react-player": "^2.9.0",
+    "react-player": "^2.13.0",
     "react-redux": "^8.0.5",
     "rollbar": "^2.24.0",
     "sharp": "^0.30.5",
@@ -63,6 +63,6 @@
     "prettier": "^2.4.1",
     "react-test-renderer": "^17.0.2",
     "ts-jest": "^27.0.5",
-    "typescript": "4.4.3"
+    "typescript": "4.5.2"
   }
 }

pages/_app.tsx

@@ -2,7 +2,7 @@ import { CacheProvider, EmotionCache } from '@emotion/react';
 import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider } from '@mui/material/styles';
 // Import the functions you need from the SDKs you need
-import { NextIntlProvider } from 'next-intl';
+import { NextIntlClientProvider } from 'next-intl';
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
@@ -89,7 +89,7 @@ function MyApp(props: MyAppProps) {
   };
 
   return (
-    <NextIntlProvider messages={pageProps.messages}>
+    <NextIntlClientProvider messages={pageProps.messages}>
       <CacheProvider value={emotionCache}>
         <Head>
           <title>Bloom</title>
@@ -108,7 +108,7 @@ function MyApp(props: MyAppProps) {
           <Consent />
         </ThemeProvider>
       </CacheProvider>
-    </NextIntlProvider>
+    </NextIntlClientProvider>
   );
 }
 

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -13,8 +17,21 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "incremental": true
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules", "cypress"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "cypress"
+  ]
 }