Merge pull request #752 from c9s/upgrade-nextjs-11-to-12

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

@@ -12,31 +12,30 @@
   "dependencies": {
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
+    "@ethersproject/units": "^5.6.1",
     "@mui/icons-material": "^5.8.3",
     "@mui/lab": "^5.0.0-alpha.85",
     "@mui/material": "^5.8.3",
     "@mui/styles": "^5.8.3",
     "@mui/x-data-grid": "^5.12.1",
-    "@nivo/bar": "^0.73.1",
-    "@nivo/core": "^0.73.0",
-    "@nivo/pie": "^0.73.0",
-    "@usedapp/core": "0.5.4",
-    "axios": "^0.22.0",
+    "@nivo/bar": "^0.79.1",
+    "@nivo/core": "^0.79.0",
+    "@nivo/pie": "^0.79.1",
+    "@usedapp/core": "1.0.9",
+    "axios": "^0.27.2",
     "classnames": "^2.2.6",
+    "ethers": "^5.6.9",
     "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",
-    "@types/react": "^17.0.0",
-    "next-transpile-modules": "^6.1.0",
-    "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-preset-env": "^6.7.0",
+    "@types/node": "^18.0.0",
+    "@types/react": "^18.0.14",
+    "next-transpile-modules": "^9.0.0",
     "prettier": "^2.6.2",
     "typescript": "^4.1.3"
   }

frontend/postcss.config.js

@@ -1,18 +0,0 @@
-module.exports = {
-  plugins: [
-    // 'tailwindcss',
-    'postcss-flexbugs-fixes',
-    [
-      'postcss-preset-env',
-      {
-        autoprefixer: {
-          flexbox: 'no-2009',
-        },
-        stage: 3,
-        features: {
-          'custom-properties': false,
-        },
-      },
-    ],
-  ],
-};

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"
+  ]
 }