upgrade packages

Author: abhishekbhardwaj

.babelrc

@@ -61,7 +61,6 @@
             ]
         },
         "import/resolver": {
-            "babel-module": {},
             "typescript": {}
         },
         "react": {

.eslintrc

@@ -2,6 +2,7 @@
 /node_modules
 .next
 .vscode
+tsconfig.tsbuildinfo
 
 # testing
 /coverage

.gitignore

@@ -3,5 +3,5 @@
   "noSemi": true,
   "semi": false,
   "trailingComma": "all",
-  "printWidth": 120,
+  "printWidth": 120
 }

.prettierrc

@@ -0,0 +1,10 @@
+{
+    "jsc": {
+        "baseUrl": ".",
+        "paths": {
+            "@src/*": [
+                "./src/*"
+            ]
+        }
+    }
+}

.swcrc

@@ -8,7 +8,6 @@ module.exports = {
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.jest.json',
-      babelConfig: true,
       diagnostics: false,
     },
   },

jest.config.js

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

next-env.d.ts

@@ -17,52 +17,45 @@
     "production:clean": "rimraf out/"
   },
   "dependencies": {
-    "@chakra-ui/react": "^1.6.8",
-    "@emotion/react": "^11.4.1",
+    "@chakra-ui/react": "^1.6.10",
+    "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
     "dotenv": "^10.0.0",
-    "framer-motion": "^4.1.17",
-    "next": "^11.1.2",
+    "framer-motion": "^5.0.0",
+    "next": "^12.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.5",
-    "@testing-library/react": "^12.1.1",
+    "@testing-library/react": "^12.1.2",
     "@types/jest": "^27.0.2",
-    "@types/node": "^16.10.1",
-    "@types/react": "^17.0.24",
-    "@types/react-addons-test-utils": "^0.14.26",
-    "@types/react-dom": "^17.0.9",
+    "@types/node": "^16.11.6",
+    "@types/react": "^17.0.33",
+    "@types/react-addons-test-utils": "^15.6.0",
+    "@types/react-dom": "^17.0.10",
     "@types/react-test-renderer": "^17.0.1",
-    "@typescript-eslint/eslint-plugin": "^4.32.0",
-    "@typescript-eslint/parser": "^4.32.0",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^27.2.3",
-    "babel-plugin-module-resolver": "^4.1.0",
+    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/parser": "^5.2.0",
     "cross-env": "^7.0.3",
-    "eslint": "^7.2.0",
+    "eslint": "^8.1.0",
     "eslint-config-airbnb": "18.2.1",
-    "eslint-config-airbnb-typescript": "^14.0.0",
-    "eslint-config-next": "^11.1.2",
+    "eslint-config-airbnb-typescript": "^14.0.1",
+    "eslint-config-next": "^12.0.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-react-app": "^6.0.0",
-    "eslint-import-resolver-babel-module": "^5.3.1",
     "eslint-import-resolver-typescript": "^2.5.0",
-    "eslint-plugin-flowtype": "^6.1.0",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-jest": "^24.4.3",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-jest": "^25.2.2",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react": "^7.26.1",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "jest": "^27.2.3",
+    "jest": "^27.3.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.4.1",
-    "react-addons-test-utils": "^15.6.2",
     "rimraf": "^3.0.2",
-    "ts-jest": "^27.0.5",
-    "typescript": "^4.4.3",
+    "ts-jest": "^27.0.7",
+    "typescript": "^4.4.4",
     "yarn-or-npm": "^3.0.1"
   }
 }

package.json

@@ -47,11 +47,56 @@ All source code is located in the `src/` directory:
 
 If you feel like changing the directory structure, please change the appropriate settings in the following files:
 
-- `.babelrc`
+- `.swcrc`
 - `jest.config.js`
 - `tsconfig.json`
 - The `lint` and the `format` scripts in `package.json`
 
 ## Note
 
 1. This project removes the `x-powered-by` response header via `next.config.js` by marking the `poweredByHeader` property as `false`.
+
+2. If you wish to use Babel instead of SWC (introduced with the Next.js v12 upgrade), please remove the `.swcrc` file and add a `.babelrc` file at the root with the following:
+
+```
+{
+    "presets": [
+        "next/babel"
+    ],
+    "plugins": [
+        [
+            "module-resolver",
+            {
+                "root": [
+                    "./"
+                ],
+                "alias": {
+                    "@src": "./src"
+                },
+                "extensions": [
+                    ".js",
+                    ".jsx",
+                    ".ts",
+                    ".tsx"
+                ]
+            }
+        ]
+    ]
+}
+```
+
+Then, open `./jest.config.js` and find the `globals` config. Add `babelConfig` to it, like so:
+
+```
+{
+    globals: {
+        'ts-jest': {
+            tsconfig: '<rootDir>/tsconfig.jest.json',
+            babelConfig: true,
+            diagnostics: false,
+        },
+    },
+}
+```
+
+Also, run `yarn add -D @babel/core babel-plugin-module-resolver eslint-import-resolver-babel-module` to install Babel's dependencies.

readme.md

@@ -1,11 +1,11 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React from 'react'
-import { AppProps } from 'next/app'
+// import { AppProps } from 'next/app'
 import { ChakraProvider } from '@chakra-ui/react'
 
 import ChakraTheme from '@src/styles/chakra-theme'
 
-const App = ({ Component, pageProps }: AppProps) => (
+const App = ({ Component, pageProps }: any) => (
   <ChakraProvider theme={ChakraTheme}>
     <Component {...pageProps} />
   </ChakraProvider>