Merge pull request #150 from Web-Dev-Path/fix/legacy-image

Replace next/legacy/image with next/image for next.js 13 upgrade

Author: mariana-caldas

CHANGELOG.md

@@ -84,4 +84,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Added
 
 ### Fixed
-- adjusted contact form message on mobile
+
+- replaced next/legacy/image with next/image
+- removed unused function in api/register.js
+- adjusted contact form message on mobile
+

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({
@@ -9,13 +9,12 @@ export default function Member({
   about,
   linkedIn,
   portfolio,
-  customClass,
 }) {
   return (
     <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} fill />
         </div>
       )}
 
@@ -28,8 +27,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 +44,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/Footer.js

@@ -1,7 +1,7 @@
+import Image from 'next/image';
 import footerStyles from '@/styles/Footer.module.scss';
 import { linksNav, linksSocial } from '@/utils/links';
 import NewsletterSubscribe from '@/components/mailchimp/NewsletterSubscribe';
-import Image from 'next/legacy/image';
 import Container from '@/components/containers/Container';
 
 export default function Footer() {

components/layout/Hero.js

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import Image from 'next/legacy/image';
+import Image from 'next/image';
 import Nav from '@/components/layout/Nav';
 import Container from '@/components/containers/Container';
 import styles from '@/styles/Hero.module.scss';
@@ -29,9 +29,7 @@ export default function Hero({
         src={imgBg}
         alt={imgAlt}
         className={styles.imageBg}
-        layout='fill'
-        objectFit='cover'
-        objectPosition='center'
+        fill
         priority
       />
       <Container customClass={styles.header__content}>

components/layout/Nav.js

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef } from 'react';
-import Image from 'next/legacy/image';
 import { useRouter } from 'next/router';
+import Link from 'next/link';
 import Container from '@/components/containers/Container';
 import styles from '@/styles/Nav.module.scss';
 import { linksNav } from '@/utils/links';
@@ -55,17 +55,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>
+            <Link href='/'>
+              <img
+                className={styles.nav__logo}
+                src='/images/svg/logo.svg'
+                alt='Logo'
+                title='Go to the Homepage'
+              />
+            </Link>
             <ul
               className={`${styles.nav__links} ${active ? styles.active : ''}`}
             >

components/mailchimp/NewsletterForm.js

@@ -1,5 +1,5 @@
 import { createRef, useState } from 'react';
-import Image from 'next/legacy/image';
+import Image from 'next/image';
 import { decode } from 'html-entities';
 import ReCAPTCHA from 'react-google-recaptcha';
 import Container from '@/components/containers/Container';
@@ -124,7 +124,6 @@ const NewsletterForm = ({ status, message, onValidated }) => {
               height={18}
               width={18}
               alt='Right Chevron SVG'
-              className={newsletterStyles.newsletter__right_chevron_image}
             />
           </span>
         </h2>

pages/about.js

@@ -12,7 +12,7 @@ import Wrapper from '@/components/containers/Wrapper';
 import Container from '@/components/containers/Container';
 import Row from '@/components/containers/Row';
 import Member from '@/components/containers/Member';
-import { whoWeAre } from '../utils/about';
+import { whoWeAre } from '@/utils/about';
 
 export default function AboutUs() {
   return (
@@ -34,6 +34,7 @@ export default function AboutUs() {
           }
           rowOrder='row'
           image='/images/svg/square-brackets.svg'
+          altTag='Square Brackets'
           color={primary}
           bgColor={primaryAccent}
           customInnerClass='our-background'
@@ -74,6 +75,7 @@ export default function AboutUs() {
           }
           rowOrder='row-reverse'
           image='/images/svg/open-angle-bracket.svg'
+          altTag='Open angle bracket'
           color={primary}
           bgColor={white}
           customInnerClass='our-process'
@@ -95,6 +97,7 @@ export default function AboutUs() {
             </div>
           }
           image='/images/svg/close-angle-bracket.svg'
+          altTag='close-angle-bracket'
           color={primary}
           bgColor={white}
           customInnerClass='our-process'
@@ -138,6 +141,7 @@ export default function AboutUs() {
           }
           rowOrder='row-reverse'
           image='/images/svg/semi-colon.svg'
+          altTag='Semi-colon'
           color={primary}
           bgColor={white}
           customInnerClass='our-purpose'
@@ -148,6 +152,7 @@ export default function AboutUs() {
           title='Wanna learn more?'
           content={''}
           image='/images/svg/close-curly-bracket.svg'
+          altTag='Close curly bracket'
           color={primary}
           bgColor={lightBgColor}
           customInnerClass='wanna-learn-more'
@@ -216,6 +221,7 @@ export default function AboutUs() {
           }
           rowOrder='row-reverse'
           image='/images/svg/slash.svg'
+          altTag='Slash'
           color={primary}
           bgColor={white}
           customInnerClass='get-started'
@@ -252,6 +258,7 @@ export default function AboutUs() {
           title='Still got questions?'
           content='Feel free to contact us.'
           image='/images/svg/hashtag.svg'
+          altTag='Hashtag'
           color={primary}
           bgColor={white}
           customInnerClass='questions'

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');
       }