Update next to version 12

Author: rvsia

packages/react-renderer-demo/babel.config.js

@@ -11,5 +11,10 @@
   },
   "functions": {
     "source": "."
+  },
+  "emulators": {
+    "hosting": {
+      "port": 5004
+    }
   }
 }

packages/react-renderer-demo/firebase.json

@@ -18,7 +18,7 @@
         "dev": "next src/",
         "build": "yarn generate:examples && yarn next build src/",
         "start": "next start src/",
-        "serve": "cross-env NODE_ENV=production firebase serve",
+        "serve": "cross-env NODE_ENV=production firebase emulators:start --only functions,hosting",
         "shell": "npm run build && firebase functions:shell",
         "deploy": "NODE_ENV=production yarn build && yarn firebase deploy --only functions,hosting",
         "logs": "firebase functions:log",
@@ -38,16 +38,16 @@
         "@mui/icons-material": "^5.2.5",
         "@mui/material": "^5.2.8",
         "@mui/styles": "^5.2.3",
-        "@next/bundle-analyzer": "^11.1.2",
-        "@next/mdx": "^11.1.2",
+        "@next/bundle-analyzer": "^12.1.0",
+        "@next/mdx": "^12.0.1",
         "@stackblitz/sdk": "^1.5.3",
         "clsx": "^1.1.1",
         "codesandbox": "2.2.3",
         "docsearch.js": "^2.6.3",
         "firebase-admin": "^10.0.1",
         "firebase-functions": "^3.16.0",
         "markdown-to-jsx": "^7.1.6",
-        "next": "11.1.3",
+        "next": "12.1.0",
         "next-offline": "^5.0.5",
         "prism-react-renderer": "^1.2.1",
         "prop-types": "^15.8.1",
@@ -57,11 +57,9 @@
         "react-dom": "^17.0.2",
         "react-github-buttons": "^0.5.0",
         "react-sticky-box": "^0.9.3",
-        "terser-webpack-plugin": "^5.3.0",
         "webpack": "^5.66.0"
     },
     "devDependencies": {
-        "@babel/cli": "^7.16.8",
         "cpx": "^1.5.0",
         "cross-env": "^7.0.3",
         "firebase-functions-test": "^0.3.3",

packages/react-renderer-demo/package.json

@@ -1,6 +1,10 @@
 import React, { useEffect, useState } from 'react';
 
-import { Alert, Button, Box, Backdrop } from '@mui/material';
+import Alert from '@mui/material/Alert';
+import Button from '@mui/material/Button';
+import Box from '@mui/material/Box';
+import Backdrop from '@mui/material/Backdrop';
+
 import { styled } from '@mui/material/styles';
 
 const Root = styled(Backdrop)(() => ({

packages/react-renderer-demo/src/babel.config.js

@@ -1,4 +1,3 @@
-const TerserPlugin = require('terser-webpack-plugin');
 const withMDX = require('@next/mdx')({
   extension: /\.mdx?$/,
 });
@@ -52,6 +51,7 @@ module.exports = withBundleAnalyzer(
       crossOrigin: 'anonymous',
       pageExtensions: ['js', 'jsx', 'md', 'mdx'],
       distDir: '../dist',
+      swcMinify: true,
       webpack: (config, options) => {
         config.resolve.alias = {
           ...config.resolve.alias,
@@ -67,15 +67,6 @@ module.exports = withBundleAnalyzer(
           '@docs/component-mapper-bar': path.resolve(__dirname, './components/component-mapper-bar'),
         };
 
-        config.optimization.minimizer = [
-          new TerserPlugin({
-            parallel: false,
-            terserOptions: {
-              keep_classnames: true, // eslint-disable-line camelcase
-              keep_fnames: true, // eslint-disable-line camelcase
-            },
-          }),
-        ];
         return config;
       },
     })