replace next/legacy/image with next/image

Author: cherylli

CHANGELOG.md

@@ -84,3 +84,5 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Added
 
 ### Fixed
+- replaced next/legacy/image with next/image
+- removed unused function in api/register.js

components/containers/Card.js

@@ -1,4 +1,4 @@
-import Image from 'next/legacy/image';
+import Image from 'next/image';
 import Link from 'next/link';
 import styles from '@/styles/Card.module.scss';
 
@@ -21,13 +21,7 @@ export default function Card({
     >
       {image && (
         <div className={styles.card__image}>
-          <Image
-            src={image}
-            alt={altTag}
-            className={styles.img}
-            layout='fill'
-            objectFit='cover'
-          />
+          <Image src={image} alt={altTag} className={styles.img} fill />
         </div>
       )}
 

components/containers/Member.js

@@ -1,4 +1,4 @@
-import Image from 'next/legacy/image';
+import Image from 'next/image';
 import styles from '@/styles/Member.module.scss';
 
 export default function Member({
@@ -15,7 +15,7 @@ export default function Member({
     <div className={styles.card}>
       {image && (
         <div className={styles.card__image}>
-          <Image src={image} alt={name} className={styles.img} layout='fill' />
+          <Image src={image} alt={name} className={styles.img} fill />
         </div>
       )}
 
@@ -28,8 +28,8 @@ export default function Member({
             <Image
               src='/images/svg/linkedin-portfolio.svg'
               alt='LinkedIn'
-              height='25px'
-              width='25px'
+              height={25}
+              width={25}
             />
             <a
               href={`https://linkedin.com/in/${linkedIn}`}
@@ -45,8 +45,8 @@ export default function Member({
             <Image
               src='/images/svg/globe.svg'
               alt='Web Site'
-              height='25px'
-              width='25px'
+              height={25}
+              width={25}
             />
             <a
               href={`https://${portfolio}`}

components/containers/TwoColumn.js

@@ -1,4 +1,4 @@
-import Image from 'next/legacy/image';
+import Image from 'next/image';
 import ButtonLink from '@/components/buttons/ButtonLink';
 import Container from '@/components/containers/Container';
 import styles from '@/styles/TwoColumn.module.scss';
@@ -57,12 +57,7 @@ export default function TwoColumn({
         {secondTextColumn && secondTextColumn}
         {!secondTextColumn && image && (
           <div className={styles.inner__image}>
-            <Image
-              src={image}
-              alt={altTag}
-              className={styles.img}
-              layout='fill'
-            />
+            <Image src={image} alt={altTag} className={styles.img} fill />
           </div>
         )}
       </Container>

components/layout/Nav.js

@@ -1,5 +1,4 @@
 import { useState, useEffect, useRef } from 'react';
-import Image from 'next/legacy/image';
 import { useRouter } from 'next/router';
 import Container from '@/components/containers/Container';
 import styles from '@/styles/Nav.module.scss';
@@ -55,17 +54,14 @@ export default function Nav() {
       <Container>
         <div ref={containerRef}>
           <nav className={styles.nav}>
-            <div className={styles.nav__logo}>
-              <a href='/' passhref='true'>
-                <Image
-                  src='/images/svg/logo.svg'
-                  height={115}
-                  width={180}
-                  alt='Logo'
-                  title='Go to the Homepage'
-                />
-              </a>
-            </div>
+            <a href='/' passhref='true'>
+              <img
+                className={styles.nav__logo}
+                src='/images/svg/logo.svg'
+                alt='Logo'
+                title='Go to the Homepage'
+              />
+            </a>
             <ul
               className={`${styles.nav__links} ${active ? styles.active : ''}`}
             >

pages/api/register.js

@@ -1,10 +1,3 @@
-const sleep = () =>
-  new Promise(resolve => {
-    setTimeout(() => {
-      resolve();
-    }, 350);
-  });
-
 export default async function handler(req, res) {
   const SECRET_KEY = process.env.RECAPTCHA_SECRET_KEY;
 
@@ -35,9 +28,6 @@ export default async function handler(req, res) {
       const captchaValidation = await response.json();
 
       if (captchaValidation.success) {
-        // Replace this with the API that will save the data received
-        // to your backend
-        await sleep();
         // Return 200 if everything is successful
         return res.status(200).send('OK');
       }

styles/Card.module.scss

@@ -61,6 +61,7 @@
 
     .img {
       border-radius: 0.25rem;
+      object-fit: cover;
     }
   }