159 upgrade to nextjs 13

web/next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

web/next.config.js

@@ -1,5 +1,8 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  compiler: {
+    emotion: true,
+  },
   pageExtensions: ["page.tsx", "page.ts", "page.jsx", "page.js"],
   reactStrictMode: true,
   swcMinify: true,

web/package.json

@@ -23,11 +23,11 @@
     "lodash": "^4.17.21",
     "material-react-table": "^1.7.3",
     "nanoevents": "^7.0.1",
-    "next": "^12.2.5",
+    "next": "^13.4.4",
     "nextjs-google-analytics": "^2.3.0",
     "pluralize": "^8.0.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-minimal-pie-chart": "^8.4.0",
     "reactflow": "^11.6.1",
     "web-worker": "^1.2.0",
@@ -55,7 +55,7 @@
     "@typescript-eslint/parser": "^5.38.1",
     "babel-loader": "^8.3.0",
     "eslint": "8.21.0",
-    "eslint-config-next": "12.2.3",
+    "eslint-config-next": "^13.4.4",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-functional": "^4.4.1",
     "eslint-plugin-import": "^2.26.0",

web/src/common/components/Layout.tsx

@@ -3,7 +3,7 @@ import { NextPage } from "next";
 import Image from "next/image";
 import { ReactNode } from "react";
 
-import Link from "./Link";
+import { Link } from "./Link";
 
 interface NavLinkProps {
   href: string;

web/src/common/components/Link.tsx

@@ -1,113 +1,15 @@
-// Combine Material Link with Nextjs Link
-// Stolen from https://github.com/mui/material-ui/blob/a7dbc3c61013941cb331ae01fffb9620088b6cfa/examples/nextjs-with-typescript/src/Link.tsx
+// Combine look of Material Link with functionality of Nextjs Link.
 
-import MuiLink, { type LinkProps as MuiLinkProps } from "@mui/material/Link";
-import { styled } from "@mui/material/styles";
-import clsx from "clsx";
-import NextLink, { LinkProps as NextLinkProps } from "next/link";
-import { useRouter } from "next/router";
-import * as React from "react";
-
-// Add support for the sx prop for consistency with the other branches.
-const Anchor = styled("a")({});
-
-interface NextLinkComposedProps
-  extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href">,
-    Omit<NextLinkProps, "href" | "as" | "onClick" | "onMouseEnter" | "onTouchStart"> {
-  to: NextLinkProps["href"];
-  linkAs?: NextLinkProps["as"];
-}
-
-export const NextLinkComposed = React.forwardRef<HTMLAnchorElement, NextLinkComposedProps>(
-  function NextLinkComposed(props, ref) {
-    const { to, linkAs, replace, scroll, shallow, prefetch, locale, ...other } = props;
-
-    return (
-      <NextLink
-        href={to}
-        prefetch={prefetch}
-        as={linkAs}
-        replace={replace}
-        scroll={scroll}
-        shallow={shallow}
-        passHref
-        locale={locale}
-      >
-        <Anchor ref={ref} {...other} />
-      </NextLink>
-    );
-  }
-);
-
-export type LinkProps = {
-  activeClassName?: string;
-  as?: NextLinkProps["as"];
-  href: NextLinkProps["href"];
-  linkAs?: NextLinkProps["as"]; // Useful when the as prop is shallow by styled().
-  noLinkStyle?: boolean;
-} & Omit<NextLinkComposedProps, "to" | "linkAs" | "href"> &
-  Omit<MuiLinkProps, "href">;
-
-// A styled version of the Next.js Link component:
-// https://nextjs.org/docs/api-reference/next/link
-const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(props, ref) {
-  const {
-    activeClassName = "active",
-    as,
-    className: classNameProps,
-    href,
-    linkAs: linkAsProp,
-    locale,
-    noLinkStyle,
-    prefetch,
-    replace,
-    // role, // Link don't have roles.
-    scroll,
-    shallow,
-    ...other
-  } = props;
+// Tried setting NextLink as the default component of MuiLink via MUI themeing (https://stackoverflow.com/a/74419666),
+// but it would hit an infinite recursion issue without making a custom component anyways.
 
-  const router = useRouter();
-  const pathname = typeof href === "string" ? href : href.pathname;
-  const className = clsx(classNameProps, {
-    [activeClassName]: router.pathname === pathname && activeClassName,
-  });
+// TODO #167: for some reason, upgrading to Next 13 caused MuiLink to throw a server-client class
+// mismatch error if any decoration props are set.
 
-  const isExternal =
-    typeof href === "string" && (href.startsWith("http") || href.startsWith("mailto:"));
-
-  if (isExternal) {
-    if (noLinkStyle) {
-      return <Anchor className={className} href={href} ref={ref} {...other} />;
-    }
-
-    return <MuiLink className={className} href={href} ref={ref} {...other} />;
-  }
-
-  const linkAs = linkAsProp ?? as;
-  const nextjsProps = {
-    to: href,
-    linkAs,
-    replace,
-    scroll,
-    shallow,
-    prefetch,
-    locale,
-  };
-
-  if (noLinkStyle) {
-    return <NextLinkComposed className={className} ref={ref} {...nextjsProps} {...other} />;
-  }
+import MuiLink, { type LinkProps as MuiLinkProps } from "@mui/material/Link";
+import NextLink from "next/link";
+import { forwardRef } from "react";
 
-  return (
-    <MuiLink
-      component={NextLinkComposed}
-      className={className}
-      ref={ref}
-      {...nextjsProps}
-      {...other}
-    />
-  );
+export const Link = forwardRef<HTMLAnchorElement, MuiLinkProps>(function Link(props, ref) {
+  return <MuiLink component={NextLink} ref={ref} {...props} />;
 });
-
-export default Link;

web/src/pages/index.page.tsx

@@ -2,7 +2,7 @@ import { ArrowDownward } from "@mui/icons-material";
 import { Box, Button, Divider, Typography } from "@mui/material";
 import type { NextPage } from "next";
 import Head from "next/head";
-import Link from "next/link";
+import NextLink from "next/link";
 
 import { YoutubeEmbed } from "../common/components/YoutubeEmbed/YoutubeEmbed";
 import { StyledBox } from "./index.style";
@@ -32,9 +32,9 @@ const Home: NextPage = () => {
         </Typography>
 
         <Box display="flex" margin="0.75rem">
-          <Link href="/solve" passHref>
-            <Button variant="contained">Solve</Button>
-          </Link>
+          <Button variant="contained" LinkComponent={NextLink} href="/solve">
+            Solve
+          </Button>
           <Button
             variant="outlined"
             endIcon={<ArrowDownward />}

web/tsconfig.json

@@ -14,8 +14,13 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "incremental": true
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
 }