Next.js files for TypeScript

.eslintrc.js

module.exports = {
    root: true, // Make sure eslint picks up the config at the root of the directory
    parser: '@typescript-eslint/parser',
    parserOptions: {
        ecmaVersion: 2020, // Use the latest ecmascript standard
        sourceType: 'module', // Allows using import/export statements
        ecmaFeatures: {
            jsx: true // Enable JSX since we're using React
        }
    },
    settings: {
        react: {
            version: 'detect' // Automatically detect the react version
        }
    },
    env: {
        browser: true, // Enables browser globals like window and document
        amd: true, // Enables require() and define() as global variables as per the amd spec.
        node: true // Enables Node.js global variables and Node.js scoping.
    },
    extends: [
        'eslint:recommended',
        'plugin:react/recommended',
        'plugin:jsx-a11y/recommended',
        'plugin:prettier/recommended', // Make this the last element so prettier config overrides other formatting rules
        'plugin:@typescript-eslint/eslint-recommended',
        'plugin:@typescript-eslint/recommended',
        'prettier/@typescript-eslint'
    ],
    plugins: ['simple-import-sort'],
    rules: {
        'prettier/prettier': ['error', {}, { usePrettierrc: true }], // Use our .prettierrc file as source
        'react/react-in-jsx-scope': 'off',
        'jsx-a11y/anchor-is-valid': [
            'error',
            {
                components: ['Link'],
                specialLink: ['hrefLeft', 'hrefRight'],
                aspects: ['invalidHref', 'preferButton']
            }
        ],
        'no-console': 1
    },
    overrides: [
        {
            files: ['**/*.tsx'],
            rules: {
                'react/prop-types': 'off'
            }
        },
        {
            files: ['*.tsx', '*.ts'],
            rules: {
                'simple-import-sort/sort': [
                    'error',
                    {
                        groups: [
                            // Packages. `react` related packages come first.
                            // Things that start with a letter (or digit or underscore), or `@` followed by a letter.
                            ['^react', '^@?\\w'],
                            // Absolute imports and Relative imports.
                            [
                                '^(utils|services|hooks|hoc|types|contexts|dictionary|components)(/.*|$)',
                                '^\\.'
                            ],
                            // for scss imports.
                            ['^[^.]']
                        ]
                    }
                ]
            }
        }
    ]
};

package.json

{
    "name": "todos",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "postbuild": "next-on-netlify",
        "lint": "eslint --fix .",
        "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
    },
    "dependencies": {
        "faunadb": "^3.0.1",
        "graphql": "^15.3.0",
        "graphql-request": "^3.0.0",
        "next": "9.5.2",
        "next-on-netlify": "^2.3.2",
        "next-pwa": "^3.1.3",
        "react": "16.13.1",
        "react-dom": "16.13.1",
        "react-hook-form": "^6.6.0",
        "swr": "^0.3.1"
    },
    "devDependencies": {
        "@types/node": "^14.6.2",
        "@types/react": "^16.9.48",
        "@typescript-eslint/eslint-plugin": "^3.10.1",
        "@typescript-eslint/parser": "^3.10.1",
        "eslint": "^7.7.0",
        "eslint-config-prettier": "^6.11.0",
        "eslint-plugin-jsx-a11y": "^6.3.1",
        "eslint-plugin-prettier": "^3.1.4",
        "eslint-plugin-react": "^7.20.6",
        "eslint-plugin-react-hooks": "^4.1.0",
        "eslint-plugin-simple-import-sort": "^5.0.3",
        "prettier": "^2.1.1",
        "typescript": "^4.0.2"
    }
}

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "strict": false,
        "forceConsistentCasingInFileNames": true,
        "noEmit": true,
        "esModuleInterop": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "jsx": "preserve"
    },
    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
    "exclude": ["node_modules"]
}