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,
 }