Preparing links to updgrade Next to 13

Web-Dev-Path · Nov 27, 2022 · 400563c · 400563c
1 parent 7e99616
commit 400563c
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 66 deletions.
diff --git a/components/containers/Card.js b/components/containers/Card.js
@@ -11,7 +11,9 @@ export default function Card({
       {linkText}
     </a>
   ) : (
-    <Link href={link}>{linkText}</Link>
+    <Link href={link} legacyBehavior>
+      {linkText}
+    </Link>
   );
   return (
     <div

diff --git a/components/layout/Footer.js b/components/layout/Footer.js
@@ -1,4 +1,3 @@
-import Link from 'next/link';
 import footerStyles from '@/styles/Footer.module.scss';
 import { linksNav, linksSocial } from '@/utils/links';
 import NewsletterSubscribe from '@/components/mailchimp/NewsletterSubscribe';
@@ -10,24 +9,26 @@ export default function Footer() {
     <footer className={footerStyles.footer}>
       <NewsletterSubscribe />
       <Container customClass={footerStyles.footer__inner}>
-        <Link href='/'>
-          <a className={footerStyles.footer__logo} title='Go to the Homepage'>
-            <Image
-              src='/images/svg/logo.svg'
-              height={250}
-              width={250}
-              alt='Our footer logo'
-            />
-          </a>
-        </Link>
+        <a
+          href='/'
+          className={footerStyles.footer__logo}
+          title='Go to the Homepage'
+        >
+          <Image
+            src='/images/svg/logo.svg'
+            height={250}
+            width={250}
+            alt='Our footer logo'
+          />
+        </a>
         <div className={footerStyles.footer__navSocialsDiv}>
           <nav className={footerStyles.footer__nav} aria-label='Main'>
             <ul className={footerStyles.footer__navList}>
               {linksNav.map(link => (
                 <li className={footerStyles.footer__navItem} key={link.text}>
-                  <Link href={link.href}>
-                    <a title={link.text}>{link.text}</a>
-                  </Link>
+                  <a href={link.href} title={link.text}>
+                    {link.text}
+                  </a>
                 </li>
               ))}
             </ul>
@@ -41,17 +42,15 @@ export default function Footer() {
                     className={footerStyles.footer__socialItem}
                     key={link.text}
                   >
-                    <Link href={link.href}>
-                      <a title={link.text} target='_blank'>
-                        <Image
-                          href={link.href}
-                          src={link.src}
-                          height={65}
-                          width={47}
-                          alt={link.alt}
-                        />
-                      </a>
-                    </Link>
+                    <a href={link.href} title={link.text} target='_blank'>
+                      <Image
+                        href={link.href}
+                        src={link.src}
+                        height={65}
+                        width={47}
+                        alt={link.alt}
+                      />
+                    </a>
                   </li>
                 ))}
             </ul>

diff --git a/components/layout/Nav.js b/components/layout/Nav.js
@@ -1,5 +1,4 @@
 import { useState, useEffect, useRef } from 'react';
-import Link from 'next/link';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import Container from '@/components/containers/Container';
@@ -57,48 +56,44 @@ export default function Nav() {
         <div ref={containerRef}>
           <nav className={styles.nav}>
             <div className={styles.nav__logo}>
-              <Link href='/' passHref>
-                <a>
-                  <Image
-                    src='/images/svg/logo.svg'
-                    height={115}
-                    width={180}
-                    alt='Logo'
-                    title='Go to the Homepage'
-                  />
-                </a>
-              </Link>
+              <a href='/' passhref='true'>
+                <Image
+                  src='/images/svg/logo.svg'
+                  height={115}
+                  width={180}
+                  alt='Logo'
+                  title='Go to the Homepage'
+                />
+              </a>
             </div>
             <ul
               className={`${styles.nav__links} ${active ? styles.active : ''}`}
             >
               {linksNav.map(({ text, href, id }) => {
                 return (
                   <li className={styles.nav__item} key={id}>
-                    <Link href={href}>
-                      <a
-                        className={`${styles.nav__link} ${
-                          router.pathname == href ? `${styles.current}` : ''
-                        }`}
-                        title={text}
-                      >
-                        {text}
-                      </a>
-                    </Link>
+                    <a
+                      href={href}
+                      className={`${styles.nav__link} ${
+                        router.pathname == href ? `${styles.current}` : ''
+                      }`}
+                      title={text}
+                    >
+                      {text}
+                    </a>
                   </li>
                 );
               })}
               <li className={styles.nav__item}>
-                <Link href='mailto:[email protected]?subject=Project collaborator application'>
-                  <a
-                    className={`${styles.nav__button} ${
-                      active ? styles.active : ''
-                    }`}
-                    title='Join us'
-                  >
-                    Join us
-                  </a>
-                </Link>
+                <a
+                  href='mailto:[email protected]?subject=Project collaborator application'
+                  className={`${styles.nav__button} ${
+                    active ? styles.active : ''
+                  }`}
+                  title='Join us'
+                >
+                  Join us
+                </a>
               </li>
             </ul>
             <button

diff --git a/pages/404.js b/pages/404.js
@@ -6,10 +6,7 @@ export default function NotFound() {
       <h1>Ooops...</h1>
       <h2>That page cannot be found :(</h2>
       <p>
-        Go back to the{' '}
-        <Link href='/'>
-          <a>Homepage</a>
-        </Link>
+        Go back to the <Link href='/'>Homepage</Link>
       </p>
     </div>
   );

diff --git a/pages/blog/index.js b/pages/blog/index.js
@@ -7,9 +7,7 @@ export default function Blog() {
       <p>We're building this page. Stay tuned!</p>
       <ul>
         <li>
-          <Link href='/blog/first-post'>
-            <a>First Post</a>
-          </Link>
+          <Link href='/blog/first-post'>First Post</Link>
         </li>
       </ul>
     </div>

diff --git a/pages/index.js b/pages/index.js
@@ -41,7 +41,7 @@ export default function Home() {
               altTag: 'Join the project',
               content:
                 'Are you learning web development and need mentorship? Are you a web dev looking for help or a code buddy for a project?',
-              link: "/about'",
+              link: '/about',
               linkText: 'Learn more',
             },
             {