Merge pull request #220 from OxfordRSE/upgrade-next-14

Upgrade next 14 (and adds revaildation to static pages)

components/Footer.tsx

@@ -1,9 +1,4 @@
 import React from "react"
-import { GetStaticProps } from "next"
-import { makeSerializable } from "lib/utils"
-import Image from "next/image"
-import { HiArrowCircleLeft, HiArrowCircleRight } from "react-icons/hi"
-import ExternalLink from "./ui/ExternalLink"
 import { ThemeButton } from "./ui/ThemeSwitcher"
 import { PageTemplate } from "lib/pageTemplate"
 import { Markdown } from "components/content/Content"

components/NavDiagramCourseNode.tsx

@@ -3,7 +3,6 @@ import Link from "next/link"
 import React, { memo } from "react"
 import { Handle, Position, Node } from "reactflow"
 import { NodeData } from "./NavDiagram"
-import { basePath } from "lib/basePath"
 
 type NodeProps = {
  data: NodeData
@@ -15,10 +14,10 @@ function NavDiagramCourseNode({ data }: NodeProps) {
  <div
  className={`px-4 py-2 h-full w-full border border-gray-200 rounded-lg shadow-md dark:border-gray-600 ${containerBgStyle}`}
  >
- <a href={`${basePath}/material/${data.theme.repo}/${data.theme.id}/${data.course?.id}`}>
+ <Link href={`/material/${data.theme.repo}/${data.theme.id}/${data.course?.id}`}>
  <div className="text-center text-l font-extrabold">{data.label}</div>
  {data.external && <div className="text-center">Theme: {data.theme.name}</div>}
- </a>
+ </Link>
 
  <Handle type="target" position={Position.Top} className="w-16 !bg-teal-500" />
  <Handle type="source" position={Position.Bottom} className="w-16 !bg-teal-500" />

components/NavDiagramSectionNode.tsx

@@ -10,7 +10,7 @@ type NodeProps = {
 
 function NavDiagramSectionNode({ data }: NodeProps) {
  return (
- <a href={`${basePath}/material/${data.theme.repo}/${data.theme.id}/${data.course?.id}/${data.section?.id}`}>
+ <Link href={`/material/${data.theme.repo}/${data.theme.id}/${data.course?.id}/${data.section?.id}`}>
  <div
  className={`px-1 py-1 h-full w-full border border-gray-200 rounded-lg shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-600`}
  >
@@ -28,7 +28,7 @@ function NavDiagramSectionNode({ data }: NodeProps) {
  <Handle type="target" position={Position.Top} className="w-16 !bg-teal-500" />
  <Handle type="source" position={Position.Bottom} className="w-16 !bg-teal-500" />
  </div>
- </a>
+ </Link>
  )
 }
 

components/NavDiagramThemeNode.tsx

@@ -13,9 +13,9 @@ function NavDiagramThemeNode({ data }: NodeProps) {
  <div
  className={`px-4 py-2 h-full w-full border border-gray-200 rounded-lg shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-600`}
  >
- <a href={`${basePath}/material/${data.theme.repo}/${data.theme.id}`}>
+ <Link href={`/material/${data.theme.repo}/${data.theme.id}`}>
  <div className="text-center text-3xl font-extrabold">{data.label}</div>
- </a>
+ </Link>
 
  <Handle type="target" position={Position.Top} className="w-16 !bg-teal-500" />
  <Handle type="source" position={Position.Bottom} className="w-16 !bg-teal-500" />

lib/revalidateTimeout.ts

@@ -0,0 +1,2 @@
+const revalidateTimeout = 3600 // Regenerate the page every hour
+export default revalidateTimeout

package.json

@@ -6,7 +6,7 @@
  "format": "prettier --write \"**/*.{ts,tsx,js,md,mdx,css,yaml}\"",
  "format:check": "prettier --check \"**/*.{ts,tsx,js,md,mdx,css,yaml}\"",
  "dev": "next dev",
- "build": "next build && next export",
+ "build": "next build",
  "start": "next start",
  "lint": "next lint",
  "cypress": "cypress open",
@@ -50,8 +50,8 @@
  "isomorphic-git": "^1.21.0",
  "js-yaml": "^4.1.0",
  "marked": "^4.1.1",
- "next": "^13.4.9-canary.1",
- "next-auth": "^4.20.1",
+ "next": "14.1.4",
+ "next-auth": "^4.24.7",
  "next-plausible": "3.12.0",
  "next-themes": "0.2.1",
  "openai": "^4.0.0",

pages/event/[eventId].tsx

@@ -6,7 +6,7 @@ import { makeSerializable } from "lib/utils"
 import Content from "components/content/Content"
 import NavDiagram from "components/NavDiagram"
 import Title from "components/ui/Title"
-import { Event, EventFull } from "lib/types"
+import type { Event } from "lib/types"
 import useSWR, { Fetcher } from "swr"
 import { basePath } from "lib/basePath"
 import EventActions from "components/EventActions"
@@ -31,6 +31,7 @@ import Checkbox from "components/forms/Checkbox"
 import SubTitle from "components/ui/SubTitle"
 import EventCommentThreads from "components/EventCommentThreads"
 import { PageTemplate, pageTemplate } from "lib/pageTemplate"
+import revalidateTimeout from "lib/revalidateTimeout"
 
 type EventProps = {
  material: Material
@@ -239,6 +240,7 @@ export const getStaticProps: GetStaticProps = async (context) => {
 
  return {
  props: makeSerializable({ event, material, pageInfo }),
+ revalidate: revalidateTimeout,
  }
 }
 

pages/event/[eventId]/[eventGroupId].tsx

@@ -25,6 +25,7 @@ import SelectField from "components/forms/SelectField"
 import IntegerField from "components/forms/IntegerField"
 import SubTitle from "components/ui/SubTitle"
 import { PageTemplate, pageTemplate } from "lib/pageTemplate"
+import revalidateTimeout from "lib/revalidateTimeout"
 
 type EventGroupProps = {
  material: Material
@@ -248,6 +249,7 @@ export const getStaticProps: GetStaticProps = async (context) => {
 
  return {
  props: makeSerializable({ event, material, eventGroupId, pageInfo }),
+ revalidate: revalidateTimeout,
  }
 }
 

pages/index.tsx

@@ -10,6 +10,7 @@ import { Button, Card } from "flowbite-react"
 import EventsView from "components/EventsView"
 import { pageTemplate, PageTemplate } from "lib/pageTemplate"
 import { Markdown } from "components/content/Content"
+import revalidateTimeout from "lib/revalidateTimeout"
 
 type HomeProps = {
  material: Material
@@ -75,6 +76,7 @@ export const getStaticProps: GetStaticProps = async (context) => {
  events: makeSerializable(events),
  pageInfo: makeSerializable(pageInfo),
  },
+ revalidate: revalidateTimeout,
  }
 }
 

pages/material/[repoId]/[themeId].tsx

@@ -8,6 +8,7 @@ import NavDiagram from "components/NavDiagram"
 import Title from "components/ui/Title"
 import { Event } from "lib/types"
 import { PageTemplate, pageTemplate } from "lib/pageTemplate"
+import revalidateTimeout from "lib/revalidateTimeout"
 
 type ThemeComponentProps = {
  theme: Theme
@@ -60,6 +61,7 @@ export const getStaticProps: GetStaticProps = async (context) => {
 
  return {
  props: makeSerializable({ material, theme, events, pageInfo, excludes }),
+ revalidate: revalidateTimeout,
  }
 }
 

pages/material/[repoId]/[themeId]/[courseId].tsx

@@ -8,6 +8,7 @@ import NavDiagram from "components/NavDiagram"
 import Title from "components/ui/Title"
 import { Event } from "lib/types"
 import { PageTemplate, pageTemplate } from "lib/pageTemplate"
+import revalidateTimeout from "lib/revalidateTimeout"
 
 type CourseComponentProps = {
  theme: Theme
@@ -76,7 +77,10 @@ export const getStaticProps: GetStaticProps = async (context) => {
  return { notFound: true }
  }
  removeMarkdown(material, course)
- return { props: makeSerializable({ theme, course, material, events, pageInfo }) }
+ return {
+ props: makeSerializable({ theme, course, material, events, pageInfo }),
+ revalidate: revalidateTimeout,
+ }
 }
 
 export default CourseComponent

pages/material/[repoId]/[themeId]/[courseId]/[sectionId].tsx

@@ -18,6 +18,7 @@ import Title from "components/ui/Title"
 import { Event } from "lib/types"
 import { PageTemplate, pageTemplate } from "lib/pageTemplate"
 import LearningOutcomes from "components/content/LearningOutcomes"
+import revalidateTimeout from "lib/revalidateTimeout"
 
 type SectionComponentProps = {
  theme: Theme
@@ -118,7 +119,10 @@ export const getStaticProps: GetStaticProps = async (context) => {
  return { notFound: true }
  }
  removeMarkdown(material, section)
- return { props: makeSerializable({ theme, course, section, events, material, pageInfo, repoUrl }) }
+ return {
+ props: makeSerializable({ theme, course, section, events, material, pageInfo, repoUrl }),
+ revalidate: revalidateTimeout,
+ }
 }
 
 export default SectionComponent

pages/material/index.tsx

@@ -6,6 +6,7 @@ import { Material, getMaterial, removeMarkdown, getExcludes } from "lib/material
 import { EventFull as Event } from "lib/types"
 import { PageTemplate, pageTemplate } from "lib/pageTemplate"
 import ThemeCards from "components/ThemeCards"
+import revalidateTimeout from "lib/revalidateTimeout"
 
 type HomeProps = {
  material: Material
@@ -40,6 +41,7 @@ export const getStaticProps: GetStaticProps = async (context) => {
  events: makeSerializable(events),
  pageInfo: makeSerializable(pageInfo),
  },
+ revalidate: revalidateTimeout,
  }
 }