Update next 14

.github/workflows/lint.yml

@@ -20,7 +20,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [20.x]
 
     env:
       EVENTS_SPREADSHEET_ID: ${{ secrets.EVENTS_SPREADSHEET_ID }}

.github/workflows/node-build.yml

@@ -20,7 +20,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [20.x]
 
     env:
       EVENTS_SPREADSHEET_ID: ${{ secrets.EVENTS_SPREADSHEET_ID }}

.nvmrc

@@ -1 +1 @@
-lts/gallium
+lts/iron

components/ActiveLink.js

@@ -14,7 +14,7 @@ const ActiveLink = ({ children, activeClassName, ...props }) => {
 
     return (
       //clones child with className if className exists
-      <Link {...props}>
+      <Link {...props} legacyBehavior>
         {React.cloneElement(child, {
           className: className || null,
         })}

components/Carousel.js

@@ -1,4 +1,4 @@
-import Image from 'next/image';
+import Image from 'next/legacy/image';
 import React from 'react';
 
 // width of each img in px

components/Committees/CommitteeEventCard.js

@@ -1,4 +1,4 @@
-import Image from 'next/image';
+import Image from 'next/legacy/image';
 import React from 'react';
 
 function CommitteeEventCard(props) {

components/Committees/CommitteeSectionIntro.js

@@ -8,7 +8,7 @@ import {
 } from '@fortawesome/free-brands-svg-icons';
 import { faLink } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import Image from 'next/image';
+import Image from 'next/legacy/image';
 import React from 'react';
 
 function CommitteeIconLink({committee, link}) {

components/Events/SelectedEvent.js

@@ -31,7 +31,11 @@ function SelectedEvent({ event }) {
         <p className={styles.description}>{description}</p>
         {(links && links.length > 0) &&
           <ul className="list-unstyled">
-            {links.map(({ text, href, ext }) => <li key={href}><Link href={href}><a className={styles['event-link']} target={ext ? '_blank': ''} rel={ext ? 'noopener noreferrer' : ''}>{text}</a></Link></li>)}
+            {links.map(({ text, href, ext }) => <li key={href}><Link
+              href={href}
+              className={styles['event-link']}
+              target={ext ? '_blank': ''}
+              rel={ext ? 'noopener noreferrer' : ''}>{text}</Link></li>)}
           </ul>
         }
       </div>

components/Footer.js

@@ -23,33 +23,45 @@ const footerInitiativeLinks = [
 
 function FooterLinkElement({ title, path, ext }){
 	return (
-		<Link href={path}>
-			<a className={styles['link-footer']} target={ext ? '_blank': ''} rel={ext ? 'noopener noreferrer' : ''}>{title}</a>
+        <Link
+            href={path}
+            className={styles['link-footer']}
+            target={ext ? '_blank': ''}
+            rel={ext ? 'noopener noreferrer' : ''}>
+			{title}
 		</Link>
-	);
+    );
 }
 
 function Footer(){
 	return (
-		<footer className={styles.footer}>
+        <footer className={styles.footer}>
 			<nav className={styles['footer-inner']} aria-labelledby="footer-navigation">
 				<h2 className="sr-only" id="footer-navigation">Footer Navigation</h2>
 				<div className="grid-desktop-3">
 					<div>
 						<h3 className={styles['footer-header']}>Find us on social media</h3>
 						<SocialMedia type="light"/>
 						<div className="mt-1">
-							<Link href="http://eepurl.com/iAS95E">
-								<a className="button tight" target="_blank" rel="noreferrer noopener">
+							<Link
+                                href="http://eepurl.com/iAS95E"
+                                className="button tight"
+                                target="_blank"
+                                rel="noreferrer noopener">
+
 									Join our Mailing List
-								</a>
+
 							</Link>
 						</div>
 						<div className="mt-1">
-							<Link href="https://linktr.ee/acmucla">
-								<a className="button tight" target="_blank" rel="noreferrer noopener">
+							<Link
+                                href="https://linktr.ee/acmucla"
+                                className="button tight"
+                                target="_blank"
+                                rel="noreferrer noopener">
+
 									Linktree
-								</a>
+
 							</Link>
 						</div>
 						<p className={styles['footer-header']}>Reach us at</p>
@@ -106,7 +118,7 @@ function Footer(){
 				</div>
 			</nav>
 		</footer>
-	);
+    );
 }
 
 export default Footer;

components/Impact/BlogCard.js

@@ -10,25 +10,29 @@ export default function BlogCard({title, author, date, length, href, authorImg,
 	/* stylelint-enable */
 
 	return (
-		// TODO: not sure how, but we need to semantically
-		// insert a description of the image for screenreaders;
-		// not natively supported by background-image
-		<Link href={href}>
-			<a target="_blank" className={styles['blog-card']} style={backgroundStyle}>
-				<div className={styles['blog-card-content']}>
-					<h4 className={styles['blog-title']}>{title}</h4>
-					<p className={styles['blog-info']}>
-						{/* eslint-disable-next-line @next/next/no-img-element */}
-						<img className={styles['blog-author-img']} src={authorImg} alt={authorAlt} />
-						<div>
-							{author}
-							<br />
-							{/* TODO: moment for date? */}
-							{date} • {length}
-						</div>
-					</p>
-				</div>
-			</a>
-		</Link>
-	);
+        // TODO: not sure how, but we need to semantically
+        // insert a description of the image for screenreaders;
+        // not natively supported by background-image
+        (<Link
+            href={href}
+            target="_blank"
+            className={styles['blog-card']}
+            style={backgroundStyle}>
+
+            <div className={styles['blog-card-content']}>
+                <h4 className={styles['blog-title']}>{title}</h4>
+                <p className={styles['blog-info']}>
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img className={styles['blog-author-img']} src={authorImg} alt={authorAlt} />
+                    <div>
+                        {author}
+                        <br />
+                        {/* TODO: moment for date? */}
+                        {date} • {length}
+                    </div>
+                </p>
+            </div>
+
+        </Link>)
+    );
 }

components/Impact/Carousel.js

@@ -2,9 +2,9 @@ import React, { useState, useEffect } from 'react';
 
 import { blogs } from '../../data/impact';
 import styles from '../../styles/pages/impact.module.scss';
-
 import BlogCard from './BlogCard';
 
+
 function Carousel() {
     const [ activeItem, changeActiveItem ] = useState(0); // keeps track of blog index (0, 1, or 2) that is currently active
     const blogInfo = blogs[activeItem]; // stores blog info for the blog number that is currently active

components/Impact/WorkshopCard.js

@@ -1,4 +1,4 @@
-import Image from 'next/image';
+import Image from 'next/legacy/image';
 import React from 'react';
 
 import styles from '../../styles/pages/impact.module.scss';

components/Internship/CommitteeInternshipInfo.js

@@ -1,4 +1,4 @@
-import Image from 'next/image';
+import Image from 'next/legacy/image';
 import React, {useState} from 'react';
 
 import styles from '../../styles/components/Internship/CommitteeInternshipInfo.module.scss';

components/JEDI/AllyshipSpaceCard.js

@@ -1,4 +1,4 @@
-import Image from 'next/image';
+import Image from 'next/legacy/image';
 import Link from 'next/link';
 import React from 'react';
 
@@ -18,8 +18,8 @@ function AllyshipSpaceCard({ title, presenters, date, location, description, img
       <div>
         <h2 className={`${styles['allyship-title']}`}>{title}</h2>
         {/* wrapped in a fragment to allow for spacing */}
-        {rsvp && <><Link href={rsvp}><a className={styles['jedi-link']}>RSVP</a></Link>{' '}</>}
-        {slides && <><Link href={slides}><a className={styles['jedi-link']}>Slides</a></Link>{' '}</>}
+        {rsvp && <><Link href={rsvp} className={styles['jedi-link']}>RSVP</Link>{' '}</>}
+        {slides && <><Link href={slides} className={styles['jedi-link']}>Slides</Link>{' '}</>}
         <p className={`${styles['my-tight']} ${styles['allyship-presenters']}`}>by { presenters }</p>
         <p className={styles['my-tight']}><em>{date} | { location }</em></p>
         <p className={styles['my-tight']}>

components/JEDI/JEDINav.js

@@ -28,7 +28,13 @@ const links = [
 ];
 
 function NavLink({ path, title, ext }){
-  return <Link href={path}><a className={styles['jedi-link']} target={ext ? '_blank': ''} rel={ext ? 'noopener noreferrer' : ''}>{title}</a></Link>;
+  return (
+    <Link
+      href={path}
+      className={styles['jedi-link']}
+      target={ext ? '_blank': ''}
+      rel={ext ? 'noopener noreferrer' : ''}>{title}</Link>
+  );
 }
 
 function JEDINav() {

components/LeadershipOfficers.js

@@ -1,4 +1,4 @@
-import Image from 'next/image';
+import Image from 'next/legacy/image';
 import React from 'react';
 
 function Officer(props){

components/Navbar.js

@@ -11,15 +11,19 @@ export default function Navbar() {
     setMenuActive(menuActive ? false : true);
   };
 
-  return(
+  return (
     <nav id="navbar">
       <section id="nav-container">
-        <Link href="/">
-          <a id="nav-title" className="nav-section left" aria-label="acm home">
-            {/* TODO: resolve next/image issue */}
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img src={'/images/acm_wordmark_chapter.svg'} id="acm-logo" alt="ACM at UCLA" />
-          </a>
+        <Link
+          href="/"
+          id="nav-title"
+          className="nav-section left"
+          aria-label="acm home">
+
+          {/* TODO: resolve next/image issue */}
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img src={'/images/acm_wordmark_chapter.svg'} id="acm-logo" alt="ACM at UCLA" />
+
         </Link>
         <section id="nav-items-container">
           <button className={menuActive ? 'active' : ''} id="hamburger" type="button" onClick={menuActivate} aria-label="navigation menu" aria-expanded={menuActive} tabIndex="0">
@@ -55,7 +59,9 @@ export default function Navbar() {
               <li><ActiveLink activeClassName="active" href="/events" passHref={true}><button type="button" role="link" onClick={menuActivate}>Events</button></ActiveLink></li>
               <li><ActiveLink activeClassName="active" href="/internship" passHref={true}><button type="button" role="link" onClick={menuActivate}>Join Us</button></ActiveLink></li>
               <li><ActiveLink activeClassName="active" href="https://opensource.uclaacm.com/" passHref={true}><button type="button" role="link" onClick={menuActivate}>Open Source</button></ActiveLink></li>
-              <li><Link href="https://members.uclaacm.com"><a className="button button-transparent button-lg font-header">Member Login</a></Link>
+              <li><Link
+                href="https://members.uclaacm.com"
+                className="button button-transparent button-lg font-header">Member Login</Link>
               </li>
             </ul>
           </section>

components/NewsArticle.js

@@ -1,4 +1,4 @@
-import Image from 'next/image';
+import Image from 'next/legacy/image';
 import React from 'react';
 
 function Article(props) {

components/OfficerCard.js

@@ -1,4 +1,4 @@
-import Image from 'next/image';
+import Image from 'next/legacy/image';
 import React from 'react';
 
 import styles from '../styles/components/OfficerCard.module.scss';

components/Officers/OfficerCard.js

@@ -1,6 +1,6 @@
 // import { faEnvelope } from '@fortawesome/free-regular-svg-icons';
 // import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import Image from 'next/image';
+import Image from 'next/legacy/image';
 import React from 'react';
 import styles from '../../styles/components/Officers/OfficerCard.module.scss';
 import '@fortawesome/fontawesome-svg-core/styles.css';

components/TechGala/ProjectCard.js

@@ -1,4 +1,4 @@
-import Image from 'next/image';
+import Image from 'next/legacy/image';
 import React from 'react';
 
 function ProjectCard(props) {

components/TechGala/TechGalaBanner.js

@@ -1,4 +1,4 @@
-import Image from 'next/image';
+import Image from 'next/legacy/image';
 import React from 'react';
 
 function TechGalaBanner() {

data/board.js

@@ -57,7 +57,7 @@ export default [
                     <li> Alumni is responsible for creating alumni events and managing the alumni network to improve
                         our current relations with past ACM at UCLA officers.</li>
                     <li> Marketing handles social media platforms and communicate with committees as needed.</li>
-                    <li> Moonshots handles bold, new initiatives for ACM to take on; past examples include <Link href="/impact"><a>Impact</a></Link> and <Link href="/jedi"><a>JEDI</a></Link>! </li>
+                    <li> Moonshots handles bold, new initiatives for ACM to take on; past examples include <Link href="/impact">Impact</Link> and <Link href="/jedi">JEDI</Link>! </li>
                 </ul>
             </> ),
             whatInternsWillDo: (