update to nextjs 16 for real this time

.oxfmtrc.json

@@ -0,0 +1,9 @@
+{
+  "singleQuote": true,
+  "trailingComma": "none",
+  "arrowParens": "avoid",
+  "printWidth": 80,
+  "semi": false,
+  "sortPackageJson": false,
+  "ignorePatterns": []
+}

.oxlintrc.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "react-perf", "nextjs", "jsx-a11y", "import", "unicorn", "oxc"],
+  "categories": {
+    "correctness": "error"
+  },
+  "rules": {
+    "import/no-anonymous-default-export": "off",
+    "react/display-name": "off",
+    "react-hooks/exhaustive-deps": "off",
+    "no-unused-vars": "warn",
+    "no-unused-expressions": "warn",
+    "no-dupe-keys": "warn",
+    "unicorn/no-useless-fallback-in-spread": "warn"
+  },
+  "env": {
+    "browser": true,
+    "es2024": true,
+    "node": true
+  }
+}

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>
 )

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,32 @@
     "dev": "next",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "oxlint",
+    "format": "oxfmt",
+    "format:check": "oxfmt --check"
   },
   "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.10",
     "lodash": "^4.17.23",
-    "mapbox-gl": "^2.15.0",
-    "next": "^12.3.1",
-    "next-compose-plugins": "^2.2.1",
+    "mapbox-gl": "^3.25.0",
+    "next": "^16.2.10",
     "nprogress": "^0.2.0",
     "pluralize": "^8.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "react-feather": "^2.0.10",
-    "theme-ui": "^0.14.7",
+    "theme-ui": "^0.17.4",
     "vanilla-tilt": "^1.8.1"
   },
   "devDependencies": {
-    "eslint": "<9.0.0",
-    "eslint-config-next": "14.0.3",
-    "eslint-config-prettier": "^8.8.0"
+    "oxfmt": "^0.58.0",
+    "oxlint": "^1.73.0"
   }
 }

pages/[region].js

@@ -108,19 +108,13 @@ let regions = [
 ]
 regions = map(regions, region => ({ id: kebabCase(region.name), ...region }))
 
-export const getStaticPaths = () => {
-  const paths = map(map(regions, 'id'), id => ({
-    params: { region: `list-of-hackathons-in-${id}` }
-  }))
-  return { paths, fallback: false }
-}
-
-export const getStaticProps = async ({ params }) => {
+export const getServerSideProps = async ({ params }) => {
   let { region } = params
   region = find(regions, ['id', region.replace('list-of-hackathons-in-', '')])
+  if (!region) return { notFound: true }
   let { name } = region
   let { events, emailStats } = await getGroupingData()
   events = events.filter(event => region.filter(event))
   events = orderBy(events, 'start', 'desc')
-  return { props: { name, events, emailStats }, revalidate: 10 }
+  return { props: { name, events, emailStats } }
 }

pages/apac.js

@@ -47,11 +47,11 @@ export default ({ events, emailStats }) => {
   )
 }
 
-export const getStaticProps = async (req, res) => {
+export const getServerSideProps = async () => {
   let events = await getEvents()
   // events where the field apac = true
   events = filter(events, 'apac')
   // upcoming events first
   events = orderBy(events, 'start', 'desc')
-  return { props: { events }, revalidate: 10 }
+  return { props: { events } }
 }

pages/index.js

@@ -72,7 +72,7 @@ export default ({ stats, emailStats, events, header }) => (
   </Grouping>
 )
 
-export const getStaticProps = async () => {
+export const getServerSideProps = async () => {
   let { events, emailStats } = await getGroupingData()
   let headerImages = [
     "/header.jpg"
@@ -120,5 +120,5 @@ export const getStaticProps = async () => {
     'desc'
   )
 
-  return { props: { events: [ ...upcomingEvents, ...previousEvents ], stats, emailStats, header: headerImages[Math.floor(Math.random() * headerImages.length)] }, revalidate: 1 }
+  return { props: { events: [ ...upcomingEvents, ...previousEvents ], stats, emailStats, header: headerImages[Math.floor(Math.random() * headerImages.length)] } }
 }

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>
@@ -180,7 +180,7 @@ export default function App({events, citiesThisPastYear}) {
   );
 }
 
-export const getStaticProps = async () => {
+export const getServerSideProps = async () => {
   let { events } = await getGroupingData()
   // Sort upcoming events by start date
   let upcomingEvents = orderBy(
@@ -197,5 +197,5 @@ export const getStaticProps = async () => {
   	'start',
 	'desc'
   ), ...upcomingEvents].map(x => x.city))
-  return { props: { events: [ ...upcomingEvents, ...previousEvents ], citiesThisPastYear }, revalidate: 1 }
-}
+  return { props: { events: [ ...upcomingEvents, ...previousEvents ], citiesThisPastYear } }
+}

pages/years/[year].js

@@ -1,7 +1,7 @@
 import Error from 'next/error'
 import Grouping from '../../components/grouping'
 import Years from '../../components/years'
-import { map, filter, orderBy, startsWith, split, first, uniq } from 'lodash'
+import { filter, orderBy, startsWith } from 'lodash'
 import { getEvents } from '../../lib/data'
 
 export default ({ year, events }) => {
@@ -19,19 +19,11 @@ export default ({ year, events }) => {
   )
 }
 
-export const getStaticPaths = async () => {
-  let events = await getEvents()
-  let starts = map(events, 'start')
-  starts = map(starts, (start) => first(split(start, '-')))
-  let years = uniq(starts)
-  const paths = map(years, (year) => ({ params: { year } }))
-  return { paths, fallback: false }
-}
-
-export const getStaticProps = async ({ params }) => {
+export const getServerSideProps = async ({ params }) => {
   const { year } = params
   let events = await getEvents()
   events = filter(events, (e) => startsWith(e.start, year))
+  if (events.length === 0) return { notFound: true }
   events = orderBy(events, 'start')
-  return { props: { year, events }, revalidate: 10 }
+  return { props: { year, events } }
 }

vercel.json

@@ -1,4 +1,3 @@
 {
-  "public": true,
   "github": { "silent": true }
 }