Update next 14 (#688)

* update next, react, react-dom

* update target property in next.config.js

* update node version

* lint files

* lint and remove craCompat

* switch to link legacy behavior

* lint files

* switch to image legacy behavior

* fix photo display

* update @testing-library/react

* install @netlify/plugin-nextjs

* remove output in next.config.js

* upgrade to node 20

* update @netlify/plugin-nextjs

* remove redundant babel config

* stop throwing errors on invalid events; warn instead

* update lock files

* chore: apply missed changes after rebase

* chore: switch to link legacy behavior

* style: lint files

* chore: update @netlify/plugin-nextjs

* fix: remove legacyBehavior tag from town hall page

* build: change from build to .next

* test: add .babelrc to make tests pass

* refactor: remove comments

* refactor: remove unnecessary redirects file

---------

Co-authored-by: Arsh Malik <[email protected]>

Author: snigdha-kansal

.babelrc

@@ -1,3 +1,3 @@
 {
   "presets": ["next/babel"]
-}
+}

.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
@@ -39,3 +40,6 @@ offoutput.json
 townhall.json
 past-townhall.json
 gmData.json
+
+# Local Netlify folder
+.netlify

.nvmrc

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

_redirects

@@ -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/ActiveLink.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/Carousel.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/CommitteeEventCard.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 }) {