Update next to 14

.github/workflows/build.yml

@@ -16,7 +16,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [18.x]
 
     steps:
     - uses: actions/checkout@v2

.github/workflows/lint.yml

@@ -16,7 +16,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [18.x]
 
     steps:
     - uses: actions/checkout@v2

.nvmrc

@@ -1 +1 @@
-lts/gallium
+lts/hydrogen

components/ContributeProject.tsx

@@ -1,4 +1,4 @@
-import Image from 'next/image';
+import Image from 'next/legacy/image';
 import React, { useState } from 'react';
 import { GFIProject, GitHubColors, GithubIssueAssignees } from '../util';
 import ELink from './ELink';

components/ELink.tsx

@@ -12,8 +12,8 @@ function ELink ({link, children}: ELinkProps): JSX.Element {
     target: '_blank',
   };
   return (
-    <Link href={link}>
-      <a {...linkProps}>{children}</a>
+    <Link href={link} {...linkProps}>
+      {children}
     </Link>
   );
 

components/Navbar.tsx

@@ -1,4 +1,4 @@
-import Image from 'next/image';
+import Image from 'next/legacy/image';
 import Link from 'next/link';
 import React, { useState } from 'react';
 
@@ -16,15 +16,19 @@ function Navbar(): JSX.Element {
   return (
     <nav id="navbar">
       <section id="nav-container">
-        <Link href="https://opensource.uclaacm.com/">
-          <a id="nav-title" className="nav-section left" aria-label="acm home">
-            <Image
-              src={WordmarkLogo}
-              width={180}
-              height={60}
-              alt="Open Source at ACM Home"
-            />
-          </a>
+        <Link
+          href="https://opensource.uclaacm.com/"
+          id="nav-title"
+          className="nav-section left"
+          aria-label="acm home">
+
+          <Image
+            src={WordmarkLogo}
+            width={180}
+            height={60}
+            alt="Open Source at ACM Home"
+          />
+
         </Link>
 
         <button
@@ -46,28 +50,28 @@ function Navbar(): JSX.Element {
             role="presentation"
           >
             <li>
-              <Link href="https://www.uclaacm.com/" passHref>
+              <Link href="https://www.uclaacm.com/" passHref legacyBehavior>
                 <button type="button" role="link" onClick={menuActivate}>
                   ACM Website
                 </button>
               </Link>
             </li>
             <li>
-              <Link href="/projects" passHref>
+              <Link href="/projects" passHref legacyBehavior>
                 <button type="button" role="link" onClick={menuActivate}>
                   Projects
                 </button>
               </Link>
             </li>
             <li>
-              <Link href="/contribute" passHref>
+              <Link href="/contribute" passHref legacyBehavior>
                 <button type="button" role="link" onClick={menuActivate}>
                   Contribute
                 </button>
               </Link>
             </li>
             <li>
-              <Link href="https://github.com/uclaacm" passHref>
+              <Link href="https://github.com/uclaacm" passHref legacyBehavior>
                 <button
                   className="github"
                   type="button"

components/ProjectCard.tsx

@@ -1,4 +1,4 @@
-import Image from 'next/image';
+import Image from 'next/legacy/image';
 import React from 'react';
 import { Project, GitHubColors } from '../util/';
 import ELink from './ELink';

next.config.js

@@ -1,7 +1,14 @@
 module.exports = {
   images: {
-    domains: ['avatars.githubusercontent.com', 'raw.githubusercontent.com'],
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'avatars.githubusercontent.com',
+      },
+      {
+        protocol: 'https',
+        hostname: 'raw.githubusercontent.com',
+      }
+    ],
   },
-};
-
-//
+};

package.json

@@ -22,10 +22,10 @@
     "@octokit/types": "^6.34.0",
     "@octokit/webhooks-types": "^5.4.0",
     "moment": "^2.29.4",
-    "next": "^12.3.1",
+    "next": "^14.2.3",
     "next-seo": "^5.1.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.1"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^14.2.3",
@@ -46,4 +46,4 @@
     "lint-staged": "^12.3.4",
     "typescript": "^4.6.4"
   }
-}
+}

pages/index.tsx

@@ -53,13 +53,13 @@ export default function Home({
             <div className="card">
               <div className="card-body">
                 <Link href="/projects">
-                  <a>
-                    <h3>Projects &rarr;</h3>
-                    <p>
-                      All of our projects are open-source! Literally, all of
-                      them.
-                    </p>
-                  </a>
+
+                  <h3>Projects &rarr;</h3>
+                  <p>
+                    All of our projects are open-source! Literally, all of
+                    them.
+                  </p>
+
                 </Link>
               </div>
             </div>
@@ -91,10 +91,10 @@ export default function Home({
             <div className="card">
               <div className="card-body">
                 <Link href="/contribute">
-                  <a>
-                    <h3>Contribute &rarr;</h3>
-                    <p>Make your first pull request with us!</p>
-                  </a>
+
+                  <h3>Contribute &rarr;</h3>
+                  <p>Make your first pull request with us!</p>
+
                 </Link>
               </div>
             </div>

util/projectRequest.ts

@@ -49,7 +49,7 @@ function mapIssuesToProjects(issues: GitHubIssue[], repoMap: Map<string, GitHubR
   for (const issue of issues){
     const issueRepoURL = issue.repository_url;
     //if map already contains that project, append to array of issues, or make a new array containing it
-    mappedRepos.set(issueRepoURL,[...mappedRepos.get(issueRepoURL) ?? [], issue]);
+    mappedRepos.set(issueRepoURL,[...(mappedRepos.get(issueRepoURL) ?? []), issue]);
   }
 
   const mapIter = mappedRepos.entries();