upgrade packages and dependencies

Author: abhishekbhardwaj

.env.example

@@ -1 +1 @@
-APP_NAME="Starter Project"
+NEXT_PUBLIC_APP_NAME="Starter Project"

.env.test

@@ -1 +1 @@
-APP_NAME="Starter Project"
+NEXT_PUBLIC_APP_NAME="Starter Project"

.eslintrc

@@ -2,29 +2,28 @@
     "parser": "@typescript-eslint/parser",
     "extends": [
         "next",
-        "plugin:react/recommended",
+        "next/core-web-vitals",
         "airbnb",
         "airbnb-typescript",
-        "plugin:jsx-a11y/recommended",
         "plugin:sonarjs/recommended",
-        "plugin:react-hooks/recommended",
-        "plugin:prettier/recommended"
+        "prettier"
     ],
     "plugins": [
         "@typescript-eslint",
         "jest",
-        "react"
+        "simple-import-sort",
+        "unused-imports"
     ],
     "env": {
-        "es6": true,
+        "es2021": true,
         "browser": true,
-        "jest": true
+        "jest": true,
+        "node": true
     },
     "rules": {
         "react/require-default-props": "off",
         "import/prefer-default-export": "off",
         "react/prop-types": "off",
-        "import/no-cycle": "off",
         "no-multi-assign": "off",
         "import/imports-first": [
             "error",
@@ -48,6 +47,10 @@
                 ]
             }
         ],
+        // Multiline indentation: https://stackoverflow.com/a/48906878
+        "indent": ["error", 2],
+        "react/jsx-indent": ["error", 2],
+        "react/jsx-indent-props": ["error", 2],
         "quotes": [
             2,
             "single",
@@ -66,16 +69,37 @@
             "ForInStatement"
         ],
         "use-isnan": "error",
-        "@typescript-eslint/no-unused-vars": [
-            "error",
+        "@typescript-eslint/no-unused-vars": "off",
+        "unused-imports/no-unused-imports": "warn",
+        "unused-imports/no-unused-vars": [
+            "warn",
             {
-                "args": "after-used",
-                "ignoreRestSiblings": true,
                 "vars": "all",
                 "varsIgnorePattern": "^_",
+                "args": "after-used",
                 "argsIgnorePattern": "^_"
             }
         ],
+        "simple-import-sort/exports": "warn",
+        "simple-import-sort/imports": [
+            "warn",
+            {
+                "groups": [
+                    ["^node:"],
+                    ["^react", "^next"],
+                    // Things that start with a letter (or digit or underscore), or `@` followed by a letter.
+                    // & side effect imports
+                    ["^@?\\w", "^\\u0000"],
+                    ["^.+\\.s?css$"],
+                    // Other imports
+                    ["^@/", "^~/"],
+                    // anything not matched in other groups
+                    ["^"],
+                    // relative imports - anything that starts with a dot
+                    ["^\\."]
+                ]
+            }
+        ],
         "@typescript-eslint/await-thenable": "error",
         "@typescript-eslint/no-floating-promises": "error",
         "@typescript-eslint/no-misused-new": "error",
@@ -106,7 +130,7 @@
     },
     "parserOptions": {
         // Allows for the parsing of modern ECMAScript features
-        "ecmaVersion": 2018,
+        "ecmaVersion": 2021,
         // Allows for the use of imports
         "sourceType": "module",
         // https://blog.geographer.fr/eslint-parser-services, https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project

.gitignore

@@ -27,6 +27,7 @@ yarn-error.log*
 
 # Environment Variables
 .env
+.env.local
 
 # Typescript
 tsconfig.tsbuildinfo

.lintstagedrc.js

@@ -1,4 +1,10 @@
+const path = require('path')
+
+// With `next lint`: https://nextjs.org/docs/basic-features/eslint#lint-staged
+const buildEslintCommand = (filenames) =>
+  `yarn lint:fix --file ${filenames.map((f) => path.relative(process.cwd(), f)).join(' --file ')}`
+
 module.exports = {
-  '*.{js,jsx,ts,tsx}': 'npm run format',
+  '*.{js,jsx,ts,tsx}': [buildEslintCommand],
   '*.{ts,tsx}': "bash -c 'npm run typecheck'", // running this via bash https://github.com/okonet/lint-staged/issues/825#issuecomment-727185296
 }

.prettierrc

@@ -1,7 +1,10 @@
 {
   "singleQuote": true,
+  "jsxSingleQuote": true,
+  "arrowParens": "always",
   "noSemi": true,
   "semi": false,
   "trailingComma": "all",
+  "tabWidth": 2,
   "printWidth": 120
 }

.swcrc

@@ -1,20 +1,30 @@
-module.exports = {
-  preset: 'ts-jest/presets/js-with-ts',
-  setupFiles: ['<rootDir>/jest.setup.ts'],
-  moduleNameMapper: {
-    '^@src/(.*)$': '<rootDir>/src/$1',
-  },
-  coveragePathIgnorePatterns: ['/node_modules/'],
-  transform: {
-    '^.+\\.[tj]sx?$': [
-      'ts-jest',
-      {
-        tsconfig: '<rootDir>/tsconfig.jest.json',
-        diagnostics: false,
-      },
-    ],
-  },
+const nextJest = require('next/jest')
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './',
+})
+
+// Add any custom config to be passed to Jest
+/** @type {import('jest').Config} */
+const customJestConfig = {
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
   moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
+
+  // if using TypeScript with a baseUrl set to the root directory then you need the snippet below for alias' to work
+  moduleDirectories: ['node_modules', '<rootDir>/'],
+
+  testEnvironment: 'jest-environment-jsdom',
   testMatch: ['**/*.(test|spec).(js|jsx|ts|tsx)'],
-  testEnvironment: 'jsdom',
+  coveragePathIgnorePatterns: ['/node_modules/'],
+  /**
+   * Absolute imports and module path aliases
+   */
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+    '^~/(.*)$': '<rootDir>/public/$1',
+  },
 }
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig)

jest.config.js

@@ -1,4 +1,5 @@
-// Loading `.env.test`: https://github.com/vercel/next.js/discussions/16270#discussioncomment-54198
-import next from 'next'
+import '@testing-library/jest-dom/extend-expect'
 
-next({})
+// Allow router mocks.
+// eslint-disable-next-line no-undef, global-require
+jest.mock('next/router', () => require('next-router-mock'))

jest.setup.ts

@@ -1,11 +1,7 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
   poweredByHeader: false,
   generateEtags: false,
-  /**
-   * Environment Variables.
-   */
-  publicRuntimeConfig: {
-    APP_NAME: process.env.APP_NAME,
-  },
-  serverRuntimeConfig: {},
+  reactStrictMode: true,
+  swcMinify: true,
 }

next.config.js

@@ -5,40 +5,39 @@
     "dev": "next",
     "build": "next build",
     "start": "next start",
+    "export": "yarn-or-npm build && next export",
+    "lint": "next lint",
+    "lint:fix": "next lint --fix",
     "test:coverage": "yarn-or-npm test --coverage",
     "test:debug": "yarn-or-npm test --debug --detectOpenHandles",
     "test:ci": "yarn-or-npm test --runInBand --no-cache --ci",
     "test": "NODE_ENV=test jest",
-    "lint": "eslint './{src,pages}/**/*' --ext .js,.jsx,.tsx,.ts",
-    "format": "eslint './{src,pages}/**/*' --ext .js,.jsx,.tsx,.ts --fix",
     "typecheck": "tsc --noEmit",
     "clean": "rimraf out/",
     "prepare": "husky install"
   },
   "dependencies": {
-    "@chakra-ui/react": "^2.4.1",
+    "@chakra-ui/react": "^2.4.3",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "framer-motion": "^7.6.12",
-    "next": "^13.0.5",
+    "framer-motion": "^7.6.19",
+    "next": "^13.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
-    "@types/jest": "^29.2.3",
-    "@types/node": "^18.11.9",
-    "@types/react": "^18.0.25",
-    "@types/react-addons-test-utils": "^15.6.0",
+    "@types/jest": "^29.2.4",
+    "@types/node": "^18.11.12",
+    "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
-    "@types/react-test-renderer": "^18.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
-    "@typescript-eslint/parser": "^5.44.0",
-    "cross-env": "^7.0.3",
-    "eslint": "^8.28.0",
+    "@typescript-eslint/eslint-plugin": "^5.46.0",
+    "@typescript-eslint/parser": "^5.46.0",
+    "eslint": "^8.29.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
-    "eslint-config-next": "^13.0.5",
+    "eslint-config-next": "^13.0.6",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-import-resolver-typescript": "^3.5.2",
@@ -48,16 +47,18 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-sonarjs": "^0.16.0",
+    "eslint-plugin-simple-import-sort": "^8.0.0",
+    "eslint-plugin-sonarjs": "^0.17.0",
+    "eslint-plugin-unused-imports": "^2.0.0",
     "husky": "^8.0.2",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
-    "lint-staged": "^13.0.3",
+    "lint-staged": "^13.1.0",
+    "next-router-mock": "^0.8.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.0",
+    "prettier": "^2.8.1",
     "rimraf": "^3.0.2",
-    "ts-jest": "^29.0.3",
-    "typescript": "^4.9.3",
+    "typescript": "^4.9.4",
     "yarn-or-npm": "^3.0.1"
   }
 }

package.json

@@ -16,7 +16,7 @@ Starter template for building a project using React, Typescript, Next.js, Jest,
 - `yarn test`: To run the entire unit test suite using `jest`.
 - `yarn test:ci`: To run tests on CI.
 - `yarn lint`: To run the ESLint based linter to find out the issues in the project.
-- `yarn format`: To autoformat all the issues.
+- `yarn lint:fix`: To autoformat all the issues.
 - `yarn export`: Run this after running `yarn analyze` to export a build copy.
 - `yarn production`: To export a production build. Use `yarn start` to serve that.
 
@@ -47,56 +47,6 @@ 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:
 
-- `.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.
+- The `lint` and the `lint:fix` scripts in `package.json`

readme.md

@@ -1,10 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Index Page renders correctly 1`] = `
-<DocumentFragment>
+<div>
   <h1
     class="chakra-heading css-0"
-    data-testid="main-heading"
   />
-</DocumentFragment>
+</div>
 `;