Bump next from 14.2.35 to 16.1.5 in the npm_and_yarn group across 1 directory

package.json

@@ -6,20 +6,21 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
-    "lint:fix": "next lint --fix",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "format": "prettier --cache --write .",
     "type-check": "tsc --noEmit",
     "style-check": "prettier . --check",
     "setup-checkers": "husky"
   },
   "dependencies": {
+    "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@next/third-parties": "^14.2.4",
+    "@next/third-parties": "^16.1.6",
     "date-fns": "^3.2.0",
     "lodash": "^4.17.23",
-    "next": "^14.2.35",
+    "next": "^16.1.5",
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.0.1",

src/app/EmotionRegistry.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import React, { useState } from 'react'
+import { CacheProvider } from '@emotion/react'
+import createCache from '@emotion/cache'
+import { useServerInsertedHTML } from 'next/navigation'
+
+type Props = {
+  children: React.ReactNode
+}
+
+export default function EmotionRegistry({ children }: Props) {
+  const [cache] = useState(() => {
+    const cache = createCache({ key: 'css', prepend: true })
+    cache.compat = true
+    return cache
+  })
+
+  useServerInsertedHTML(() => {
+    const entries = Object.entries(cache.inserted)
+    const names = entries.map(([name]) => name).join(' ')
+    let styles = ''
+
+    for (const [, value] of entries) {
+      if (typeof value === 'string') {
+        styles += value
+      }
+    }
+
+    return <style data-emotion={`${cache.key} ${names}`} dangerouslySetInnerHTML={{ __html: styles }} />
+  })
+
+  return <CacheProvider value={cache}>{children}</CacheProvider>
+}

src/app/homepage/MediaSection.tsx

@@ -2,6 +2,7 @@
 import { FontSize, FontWeight } from '@/app/theme'
 import styled from '@emotion/styled'
 import React from 'react'
+import Image from 'next/image'
 import { Section, SectionHeader, FullWidthContainer } from './Styles'
 import { VIDEOS } from '@/data/videos'
 import { LinkButton } from '@/components/LinkButton'
@@ -28,6 +29,8 @@ const VideoContainer = styled.div`
   min-width: 300px;
   aspect-ratio: 16 / 9;
   margin-bottom: 8px;
+  position: relative;
+  overflow: hidden;
 `
 
 const VideoTitle = styled.h3`
@@ -62,7 +65,14 @@ export const MediaSection = () => {
                   <YouTubeEmbed videoid={video.id}></YouTubeEmbed>
                 ) : (
                   <a href={video.url} target="_blank" rel="noopener noreferrer">
-                    <img src={`/thumbnails/${video.id}.png`} alt={video.title} />
+                    <Image
+                      src={`/thumbnails/${video.id}.png`}
+                      alt={video.title}
+                      fill
+                      sizes="(max-width: 768px) 100vw, 320px"
+                      style={{ objectFit: 'cover' }}
+                      priority={false}
+                    />
                   </a>
                 )}
               </VideoContainer>

src/app/homepage/ResearchThemesSection.tsx

@@ -1,4 +1,5 @@
 'use client'
+import React, { useEffect, useState } from 'react'
 import { Color, FontVariant } from '@/app/theme'
 import { Member } from '@/data/members'
 import { PUBLICATIONS, Publication, ResearchTopics, type ResearchTopicType } from '@/data/publications'
@@ -60,9 +61,7 @@ const GatherStatsByResearchTopic = () => {
     )
     const filteredAuthors = topicAuthors.filter(entry => entry instanceof Object && entry.isAlumni !== true) as Member[]
 
-    const shuffledAuthors = shuffle(filteredAuthors)
-
-    statsByResearchTopic[researchTopicKey] = { numPublications, authors: shuffledAuthors }
+    statsByResearchTopic[researchTopicKey] = { numPublications, authors: filteredAuthors }
   })
   return statsByResearchTopic
 }
@@ -71,13 +70,25 @@ const RESEARCH_TOPICS = Object.entries(GatherStatsByResearchTopic()).sort(
   ([, a], [, b]) => b.numPublications - a.numPublications
 )
 const NUM_VISIBLE = 5
+type ResearchTopicsEntry = (typeof RESEARCH_TOPICS)[number]
 
 export const ResearchThemesSection = () => {
+  const [displayTopics, setDisplayTopics] = useState<ResearchTopicsEntry[]>(RESEARCH_TOPICS)
+
+  useEffect(() => {
+    setDisplayTopics(
+      RESEARCH_TOPICS.map(([topic, stats]) => [
+        topic,
+        { ...stats, authors: shuffle(stats.authors) },
+      ]) as ResearchTopicsEntry[]
+    )
+  }, [])
+
   return (
     <Section id="research-section">
       <SectionHeader title="Research Themes" subtitle="Discover the research happening at KIXLAB" />
       <ResearchTopicsArea>
-        {RESEARCH_TOPICS.map(([topic, stats]) => {
+        {displayTopics.map(([topic, stats]) => {
           return (
             <Link
               href={`/publications/?researchTopic=${topic}`}

src/app/layout.tsx

@@ -5,6 +5,7 @@ import { GoogleAnalytics } from '@next/third-parties/google'
 import { NavBar } from '@/components/NavBar'
 import { Footer } from '@/components/Footer'
 import GlobalStyles from '@/app/GlobalStyles'
+import EmotionRegistry from '@/app/EmotionRegistry'
 
 const notoSans = Noto_Sans({ subsets: ['latin'], weight: ['400', '700'] })
 
@@ -35,10 +36,12 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang="en">
       <body className={notoSans.className}>
-        <GlobalStyles />
-        <NavBar />
-        {children}
-        <Footer />
+        <EmotionRegistry>
+          <GlobalStyles />
+          <NavBar />
+          {children}
+          <Footer />
+        </EmotionRegistry>
       </body>
       <GoogleAnalytics gaId="G-WY6K7SWSCE" />
     </html>

src/components/SideBar.tsx

@@ -64,47 +64,49 @@ const capitalizeWords = (s: string) => {
   return startCase(s)
 }
 
-export const Sidebar = React.forwardRef(
-  ({ handleLinkClick, sidebarList, sectionRefs, observerOptions = defaultObserverOptions }: ISidebar) => {
-    const [activeSection, setActiveSection] = useState<string | null>(null)
-    const ignoreObserver = useRef(false)
-    useEffect(() => {
-      const observer = new IntersectionObserver(entries => {
-        if (ignoreObserver.current) return
-        entries.forEach(entry => {
-          if (entry.isIntersecting) {
-            setActiveSection(entry.target.id)
-          }
-        })
-      }, observerOptions)
+export const Sidebar = ({
+  handleLinkClick,
+  sidebarList,
+  sectionRefs,
+  observerOptions = defaultObserverOptions,
+}: ISidebar) => {
+  const [activeSection, setActiveSection] = useState<string | null>(null)
+  const ignoreObserver = useRef(false)
+  useEffect(() => {
+    const observer = new IntersectionObserver(entries => {
+      if (ignoreObserver.current) return
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          setActiveSection(entry.target.id)
+        }
+      })
+    }, observerOptions)
 
-      if (sectionRefs.current !== null) {
-        const sections = Object.values(sectionRefs.current)
-        sections.forEach(section => {
-          section && observer.observe(section)
-        })
+    if (sectionRefs.current !== null) {
+      const sections = Object.values(sectionRefs.current)
+      sections.forEach(section => {
+        section && observer.observe(section)
+      })
 
-        return () => {
-          observer.disconnect()
-        }
+      return () => {
+        observer.disconnect()
       }
-    }, [sectionRefs, observerOptions])
+    }
+  }, [sectionRefs, observerOptions])
 
-    return (
-      <SideBarContainer>
-        {/* TODO: replace sideBarList with sectionRefs */}
-        {sidebarList.map(section => (
-          <SidebarLink
-            key={section}
-            href={`#${section}`}
-            className={activeSection === section ? 'active' : ''}
-            onClick={() => handleLinkClick && handleLinkClick()}
-          >
-            {capitalizeWords(section)}
-          </SidebarLink>
-        ))}
-      </SideBarContainer>
-    )
-  }
-)
-Sidebar.displayName = 'Sidebar'
+  return (
+    <SideBarContainer>
+      {/* TODO: replace sideBarList with sectionRefs */}
+      {sidebarList.map(section => (
+        <SidebarLink
+          key={section}
+          href={`#${section}`}
+          className={activeSection === section ? 'active' : ''}
+          onClick={() => handleLinkClick && handleLinkClick()}
+        >
+          {capitalizeWords(section)}
+        </SidebarLink>
+      ))}
+    </SideBarContainer>
+  )
+}

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -12,17 +16,27 @@
     "resolveJsonModule": true,
     "forceConsistentCasingInFileNames": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
-        "name": "next",
-      },
+        "name": "next"
+      }
     ],
     "paths": {
-      "@/*": ["./src/*"],
-    },
+      "@/*": [
+        "./src/*"
+      ]
+    }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }