Update next 14

.github/workflows/lint.yml

@@ -19,7 +19,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

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

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+yarn.lock
 
 # testing
 /coverage

.nvmrc

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

components/ActiveLink.js

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

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/DevProjectCards.js

@@ -112,7 +112,7 @@ function Project({
 function projects(props) {
   return (
     // TODO: more flexible mobile views
-    <>
+    (<>
       {props.projects.map((project) => (
         <Project
           {...project}
@@ -121,7 +121,7 @@ function projects(props) {
           key={project.name}
         />
       ))}
-    </>
+    </>)
   );
 }
 

components/Events/SelectedEvent.js

@@ -19,7 +19,7 @@ function SelectedEvent({ event }) {
   }, [event]);
 
   return (
-    <div className={styles['card-container']}>
+    (<div className={styles['card-container']}>
       <h2 className={styles['card-header']}>event information</h2>
       {/* eslint-disable-next-line @next/next/no-img-element */}
       <img
@@ -42,21 +42,21 @@ function SelectedEvent({ event }) {
           <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
+                  href={href}
+                  className={styles['event-link']}
+                  target={ext ? '_blank' : ''}
+                  rel={ext ? 'noopener noreferrer' : ''}>
+
+                  {text}
+
                 </Link>
               </li>
             ))}
           </ul>
         )}
       </div>
-    </div>
+    </div>)
   );
 }
 

components/Footer.js

@@ -1,8 +1,8 @@
 import Link from 'next/link';
 import React from 'react';
+import SocialMedia from './SocialMedia';
 import committees from '../data/committees';
 import styles from '../styles/components/Footer.module.scss';
-import SocialMedia from './SocialMedia';
 
 const footerACMLinks = [
   { title: 'About', path: '/about' },
@@ -27,21 +27,21 @@
 
 function FooterLinkElement({ title, path, ext }) {
   return (
-    <Link href={path}>
-      <a
-        className={styles['link-footer']}
-        target={ext ? '_blank' : ''}
-        rel={ext ? 'noopener noreferrer' : ''}
-      >
-        {title}
-      </a>
-    </Link>
+    (<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"
@@ -54,25 +54,25 @@
             <h3 className={styles['footer-header']}>Find us on social media</h3>
             <SocialMedia type="light" />
             <div className="mt-1">
-              <Link href="http://eepurl.com/hdEvNP">
-                <a
-                  className="button tight"
-                  target="_blank"
-                  rel="noreferrer noopener"
-                >
+              <Link
+                href="http://eepurl.com/hdEvNP"
+                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>
@@ -116,7 +116,7 @@
                         /* TODO: resolve 404 with <Image /> component */
                         /* eslint-disable-next-line @next/next/no-img-element */
                         title={
                           <img
                             className="committee-sidebar-image"
                             src={wordmark_dark}
                             alt={`ACM ${name}`}
@@ -151,7 +151,7 @@
           </span>
         </div>
       </nav>
-    </footer>
+    </footer>)
   );
 }
 

components/Impact/BlogCard.js

@@ -22,30 +22,30 @@ export default function BlogCard({
     // 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>
+    (<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

@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from 'react';
 
+import BlogCard from './BlogCard';
 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

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/Internship/NextSteps.js

@@ -3,20 +3,6 @@ import React from 'react';
 function NextSteps(props) {
   const { image, name, info } = props;
   return (
-    <>
-      <div
-        style={{
-          border: '1px solid grey',
-          margin: '5px',
-          borderRadius: '5px',
-          padding: '15px',
-        }}
-      >
-        {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img src={image} alt={name} height="30px" />
-        <p>{info}</p>
-      </div>
-    </>
     // <button className={styles['committee-card']} onClick={() => setFlipped(!isFlipped)} role='tab'>
     //     <div className={`${styles['next-steps-card-inner']} ${styles[isFlipped ? null : 'is-flipped']}`}>
     //         <div className={styles['next-steps-card-face']}>
@@ -32,6 +18,20 @@ function NextSteps(props) {
     //         </div>
     //     </div>
     // </button>
+    (<>
+      <div
+        style={{
+          border: '1px solid grey',
+          margin: '5px',
+          borderRadius: '5px',
+          padding: '15px',
+        }}
+      >
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img src={image} alt={name} height="30px" />
+        <p>{info}</p>
+      </div>
+    </>)
   );
 }
 

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';
 
@@ -22,7 +22,7 @@ function AllyshipSpaceCard({
   priority,
 }) {
   return (
-    <div className={`${styles['allyship-row']} ${styles['mb-2']}`}>
+    (<div className={`${styles['allyship-row']} ${styles['mb-2']}`}>
       <div className={styles['allyship-image']}>
         <Image src={img} alt={alt} priority={priority} />
       </div>
@@ -31,15 +31,15 @@ function AllyshipSpaceCard({
         {/* wrapped in a fragment to allow for spacing */}
         {rsvp && (
           <>
-            <Link href={rsvp}>
-              <a className={styles['jedi-link']}>RSVP</a>
+            <Link href={rsvp} className={styles['jedi-link']}>
+              RSVP
             </Link>{' '}
           </>
         )}
         {slides && (
           <>
-            <Link href={slides}>
-              <a className={styles['jedi-link']}>Slides</a>
+            <Link href={slides} className={styles['jedi-link']}>
+              Slides
             </Link>{' '}
           </>
         )}
@@ -53,7 +53,7 @@ function AllyshipSpaceCard({
         </p>
         <p className={styles['my-tight']}>{description}</p>
       </div>
-    </div>
+    </div>)
   );
 }