update to nextjs 16 for real this time

components/announcement.js

@@ -1,4 +1,4 @@
-import { Card, Text, Badge } from 'theme-ui'
+import { Card, Text, Badge, Image } from 'theme-ui'
 import { keyframes } from '@emotion/react'
 import Icon from './icon'
 
@@ -79,7 +79,7 @@ const Announcement = ({
     sx={{ flex: '1 1 auto', strong: { display: ['inline', 'block'] }, color: copyColor }}
   >
 		  {copyLogo && (
-      <img src={copyLogo} alt="Copy Logo" style={{ maxWidth: logoImageMaxWidth, display: ['inline', 'block'] }} />
+      <Image src={copyLogo} alt="Copy Logo" sx={{ maxWidth: logoImageMaxWidth, display: ['inline', 'block'] }} />
     )}
     <strong>{copy}</strong>
     {caption && (

components/icon.js

@@ -1,8 +1,5 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { jsx } from 'theme-ui'
 import Icon from '@hackclub/icons'
 
 const IconComponent = props => <Icon {...props} />
 
-export default IconComponent
+export default IconComponent

components/nav.js

@@ -29,16 +29,15 @@ const NavButton = ({ sx, ...props }) => (
 )
 
 const BackButton = ({ to = '/', text = 'All Hackathons' }) => (
-  <Link href={to} passHref>
-    <NavButton
-      as="a"
-      title={to === '/' ? 'Back to homepage' : 'Back'}
-      sx={{ display: 'flex', width: 'auto', pr: 2 }}
-    >
-      <ArrowLeft />
-      {text}
-    </NavButton>
-  </Link>
+  <NavButton
+    as={Link}
+    href={to}
+    title={to === '/' ? 'Back to homepage' : 'Back'}
+    sx={{ display: 'flex', width: 'auto', pr: 2 }}
+  >
+    <ArrowLeft />
+    {text}
+  </NavButton>
 )
 
 const Flag = () => (

components/regions.js

@@ -22,25 +22,24 @@ export default ({ showAll = false, sx = {} }) => (
     }}
   >
     {showAll && (
-      <Link href="/" passHref>
-        <Card
-          as="a"
-          variant="primary"
-          sx={{
-            bg: 'elevated',
-            color: 'primary',
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            alignItems: 'center',
-            textDecoration: 'none',
-            fontSize: 3,
-            fontWeight: 'bold'
-          }}
-        >
-          All Events
-        </Card>
-      </Link>
+      <Card
+        as={Link}
+        href="/"
+        variant="primary"
+        sx={{
+          bg: 'elevated',
+          color: 'primary',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          textDecoration: 'none',
+          fontSize: 3,
+          fontWeight: 'bold'
+        }}
+      >
+        All Events
+      </Card>
     )}
     {Object.entries(regions).map(([name, url]) => (
       <Card

components/years.js

@@ -17,18 +17,25 @@ Object.entries(palette).map(([name, bg], i) => {
 const Years = ({ showAll = false }) => (
   <Grid columns={[1, 2, showAll ? 7 : 6]} gap={[3, 4]}>
     {showAll && (
-      <Link href="/" passHref>
-        <Card as="a" variant="nav" sx={{ bg: 'elevated', color: 'primary' }}>
-          All Events
-        </Card>
-      </Link>
+      <Card
+        as={Link}
+        href="/"
+        variant="nav"
+        sx={{ bg: 'elevated', color: 'primary' }}
+      >
+        All Events
+      </Card>
     )}
     {years.map(year => (
-      <Link href={`/years/${year}`} passHref key={year}>
-        <Card as="a" variant="nav" sx={{ ...rainbow, color: 'white' }}>
-          {year}
-        </Card>
-      </Link>
+      <Card
+        as={Link}
+        href={`/years/${year}`}
+        variant="nav"
+        sx={{ ...rainbow, color: 'white' }}
+        key={year}
+      >
+        {year}
+      </Card>
     ))}
   </Grid>
 )

eslint.config.mjs

@@ -0,0 +1,14 @@
+import nextVitals from 'eslint-config-next/core-web-vitals'
+import prettier from 'eslint-config-prettier'
+
+export default [
+  ...nextVitals,
+  prettier,
+  {
+    rules: {
+      'import/no-anonymous-default-export': 'off',
+      'react/display-name': 'off',
+      'react-hooks/exhaustive-deps': 'off'
+    }
+  }
+]

lib/data.js

@@ -5,7 +5,7 @@ export const api_url_for = path => {
 
   return base + path
 }
-const getJSON = url => fetch(url).then(r => r.json())
+const getJSON = url => fetch(url, { next: { revalidate: 1 } }).then(r => r.json())
 const api_get = path => getJSON(api_url_for(path))
 const api_get_all = async path => {
   // Fetch all pages of data

next.config.js

@@ -4,9 +4,6 @@ const withMDX = require('@next/mdx')({ extension: /\.mdx?$/ })
 const nextConfig = {
   trailingSlash: true,
   pageExtensions: ['js', 'jsx', 'mdx'],
-  eslint: {
-    ignoreDuringBuilds: true
-  },
   turbopack: {
     resolveAlias: {
       '@theme-ui/mdx': './lib/theme-ui-mdx-stub.js'

package.json

@@ -8,31 +8,31 @@
     "dev": "next",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "eslint ."
   },
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.10.5",
-    "@hackclub/icons": "^0.0.14",
-    "@hackclub/meta": "1.1.32",
-    "@hackclub/theme": "^0.3.3",
-    "@mdx-js/loader": "^1.6.22",
-    "@next/mdx": "^13.4.19",
+    "@hackclub/icons": "^0.2.2",
+    "@hackclub/meta": "^1.2.1",
+    "@hackclub/theme": "^1.1.0",
+    "@mdx-js/loader": "^3.1.1",
+    "@mdx-js/react": "^3.1.1",
+    "@next/mdx": "^16.2.6",
     "lodash": "^4.17.23",
     "mapbox-gl": "^2.15.0",
-    "next": "^12.3.1",
-    "next-compose-plugins": "^2.2.1",
+    "next": "^16.2.6",
     "nprogress": "^0.2.0",
     "pluralize": "^8.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
     "react-feather": "^2.0.10",
     "theme-ui": "^0.14.7",
     "vanilla-tilt": "^1.8.1"
   },
   "devDependencies": {
-    "eslint": "<9.0.0",
-    "eslint-config-next": "14.0.3",
+    "eslint": "^9.0.0",
+    "eslint-config-next": "^16.2.6",
     "eslint-config-prettier": "^8.8.0"
   }
 }

pages/map.js

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useState } from 'react';
-import mapboxgl from 'mapbox-gl'; // eslint-disable-line import/no-webpack-loader-syntax
+import mapboxgl from 'mapbox-gl';
 import Head from 'next/head'
 import Meta from '@hackclub/meta'
 import { useColorMode, Box, Link } from 'theme-ui'
@@ -89,8 +89,8 @@ export default function App({events, citiesThisPastYear}) {
 			    backgroundColor: 'sunken',
 				color: 'text'
 			  }}>
-		  	This past year, we've had a high-school hackathon in {" "}
-		  	<b>{citiesThisPastYear.length} cities around the world</b>. Can't find one in your hometown? <Link href="https://hackclub.com/how-to-organize-a-hackathon/">Start one</Link>.
+		  	This past year, we&apos;ve had a high-school hackathon in {" "}
+		  	<b>{citiesThisPastYear.length} cities around the world</b>. Can&apos;t find one in your hometown? <Link href="https://hackclub.com/how-to-organize-a-hackathon/">Start one</Link>.
 		  </Box>
 	  </div>
 	  <style>
@@ -198,4 +198,4 @@ export const getStaticProps = async () => {
 	'desc'
   ), ...upcomingEvents].map(x => x.city))
   return { props: { events: [ ...upcomingEvents, ...previousEvents ], citiesThisPastYear }, revalidate: 1 }
-}
+}