[NEW] Migrating to NextJS 13

app/components/auth/dummy/ui/DummyLoginButton.js

@@ -3,7 +3,7 @@ import { NoUserAvatar } from "../../NoUserAvatar";
 import { Button } from "react-bootstrap";
 import styles from "../styles/DummyLoginButton.module.css";
 import { useDummyAuth } from "../hooks/useDummyAuth";
-import Image from 'next/future/image';
+import Image from "next/image";
 
 export default function DummyLoginButton() {
   const [isLoginUiOpen, setIsLoginUiOpen] = useState(false);

app/components/auth/keycloak/ui/KeycloakAuthMenuButton.js

@@ -3,7 +3,7 @@ import KeycloakAuthUI from "./KeycloakAuthUI";
 import { NoUserAvatar } from "../../NoUserAvatar";
 import styles from "../styles/KeycloakAuthMenuButton.module.css";
 import { signIn, useSession } from "next-auth/react";
-import Image from "next/future/image";
+import Image from "next/image";
 
 export default function KeycloakAuthMenuButton({ }) {
     const { data: session } = useSession();

app/components/auth/keycloak/ui/KeycloakAuthUI.js

@@ -1,5 +1,5 @@
 import { useSession } from "next-auth/react";
-import Image from "next/future/image";
+import Image from "next/image";
 import Link from "next/link";
 import { Button } from "react-bootstrap";
 import { NoUserAvatar } from "../../NoUserAvatar";
@@ -10,43 +10,41 @@ export default function KeycloakUserInfo() {
     if (!session)
         return <div />;
     const user = session.user;
-    return (
-        <>
-            <div className="d-flex flex-column align-items-center mt-4 mb-3 ml-3 mr-3 border-bottom">
-                <div className="mb-1">
-                    {
-                        user.image ?
-                            <Image src={user.image}
-                                alt={user.name}
-                                style={{
-                                    borderRadius: "50%"
-                                }}
-                                height={64}
-                                width={64} />
-                            :
-                            <NoUserAvatar size="64" name={user.name} />
-                    }
-                </div>
-                <div className="font-weight-bold mb-1">
-                    {user.name}
-                </div>
-                <div
-                    className="mb-1"
-                    style={{ color: "var(--bs-gray-700)" }}>
-                    {user.email}
-                </div>
-                <div
-                    className="mb-1"
-                    style={{ color: "var(--bs-gray-700)" }}>
-                    <Link href="/api/auth/profilekc"><a>Manage profile</a></Link>
-                </div>
+    return <>
+        <div className="d-flex flex-column align-items-center mt-4 mb-3 ml-3 mr-3 border-bottom">
+            <div className="mb-1">
+                {
+                    user.image ?
+                        <Image src={user.image}
+                            alt={user.name}
+                            style={{
+                                borderRadius: "50%"
+                            }}
+                            height={64}
+                            width={64} />
+                        :
+                        <NoUserAvatar size="64" name={user.name} />
+                }
             </div>
-            <div className="d-flex justify-content-center mb-4 mt-3 ml-3 mr-3">
-                <Button variant="secondary"
-                    onClick={() => signOutKC({ callbackUrl: window.location.href })}>
-                    Sign Out
-                </Button>
+            <div className="font-weight-bold mb-1">
+                {user.name}
             </div>
-        </>
-    )
+            <div
+                className="mb-1"
+                style={{ color: "var(--bs-gray-700)" }}>
+                {user.email}
+            </div>
+            <div
+                className="mb-1"
+                style={{ color: "var(--bs-gray-700)" }}>
+                <Link href="/api/auth/profilekc">Manage profile</Link>
+            </div>
+        </div>
+        <div className="d-flex justify-content-center mb-4 mt-3 ml-3 mr-3">
+            <Button variant="secondary"
+                onClick={() => signOutKC({ callbackUrl: window.location.href })}>
+                Sign Out
+            </Button>
+        </div>
+    </>;
 }

app/components/auth/rc-auth-google/ui/RCAuth4Google.js

@@ -4,7 +4,7 @@ import { NoUserAvatar } from '../../NoUserAvatar';
 
 import styles from '../styles/DummyLoginButton.module.css';
 import { Button, Form, InputGroup, Modal } from 'react-bootstrap';
-import Image from 'next/future/image';
+import Image from "next/image";
 
 export default function RCAuthGoogleLoginButton({
   user,

app/components/auth/rocketchat/ui/RocketChatAuthMenuButton.js

@@ -3,7 +3,7 @@ import RocketChatAuthUI from "./RocketChatAuthUI";
 import { NoUserAvatar } from "../../NoUserAvatar";
 import styles from "../styles/RocketChatAuthMenuButton.module.css";
 import { signIn, useSession } from "next-auth/react";
-import Image from "next/future/image";
+import Image from "next/image";
 
 export default function RocketChatAuthMenuButton({ }) {
     const { data: session } = useSession();

app/components/auth/rocketchat/ui/RocketChatAuthUI.js

@@ -1,5 +1,5 @@
 import { signOut, useSession } from "next-auth/react";
-import Image from "next/future/image";
+import Image from "next/image";
 import { Button } from "react-bootstrap";
 import { NoUserAvatar } from "../../NoUserAvatar";
 

app/components/brandlogo.js

@@ -1,18 +1,15 @@
-import Image from 'next/image'
-import styles from "../styles/BrandLogo.module.css";
+import Image from "next/legacy/image";
 
 export default function BrandLogo(props) {
   return (
     <>
-      <a href={props.brandLink} className={styles.brand}>
         <Image
           src={props.logoLink}
           title={props.imageTitle}
           alt={props.brandName}
           height={props.height}
           width={props.width}
         />
-      </a>
     </>
   );
 }

app/components/clientsideonly/countup.js

@@ -15,5 +15,5 @@ export default  function Countup(props) {
       setValue(props.end.toString());
     }
   });
-  return <> <span className={props.className}>{value || count }</span> </>;
+  return <span className={props.className}>{value || count }</span>;
 }

app/components/growthcounters.js

@@ -7,7 +7,7 @@ export default function Growthcounters() {
       <div className=' d-flex flex-row align-items-center justify-content-center '>
         <div className='d-flex flex-column  pe-4 px-md-5 mx-md-3'>
           <span suppressHydrationWarning={true}>
-            {process.browser && (
+            {typeof window && (
               <Countup end={343433} className={` ${styles.countup}`} />
             )}
           </span>
@@ -17,7 +17,7 @@ export default function Growthcounters() {
 
         <div className='d-flex flex-column  px-4 px-md-5 mx-md-3 border-start border-gray'>
           <span suppressHydrationWarning={true}>
-            {process.browser && (
+            {typeof window && (
               <Countup end={1294056} className={` ${styles.countup}`} />
             )}
           </span>
@@ -26,7 +26,7 @@ export default function Growthcounters() {
 
         <div className='d-flex flex-column  ps-4 px-md-5 mx-md-3 border-start border-gray'>
           <span suppressHydrationWarning={true}>
-            {process.browser && (
+            {typeof window && (
               <Countup end={507} className={` ${styles.countup}`} />
             )}
           </span>