upgrade nextjs from 11 to 12

frontend/next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

frontend/next.config.js

@@ -1,16 +1,9 @@
-const withTM = require('next-transpile-modules')([
-  '@react-spring/three',
-  '@react-spring/web',
-]);
-
-module.exports = withTM({
-  // disable webpack 5 to make it compatible with the following rules
-  webpack5: false,
-  webpack: (config, options) => {
-    config.module.rules.push({
-      test: /react-spring/,
-      sideEffects: true,
-    });
-    return config;
-  },
-});
+module.exports = async (phase, { defaultConfig }) => {
+  /**
+   * @type {import('next').NextConfig}
+   */
+  const nextConfig = {
+    /* config options here */
+  }
+  return nextConfig
+}

frontend/package.json

@@ -24,12 +24,11 @@
     "axios": "^0.22.0",
     "classnames": "^2.2.6",
     "isomorphic-fetch": "^3.0.0",
-    "next": "^11.1.2",
+    "next": "12",
     "qrcode.react": "^3.0.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-number-format": "^4.4.4",
-    "react-spring": "^9.3.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-number-format": "^4.4.4"
   },
   "devDependencies": {
     "@types/node": "^14.14.22",

frontend/tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -12,8 +16,15 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "incremental": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }