Fixing Eslint configuration

beta/.eslintrc

@@ -1,18 +1,10 @@
 {
-  "extends": ["react-app", "plugin:jsx-a11y/recommended"],
-  "plugins": ["jsx-a11y"],
-  "overrides": [
-    {
-      "files": ["**/*.ts?(x)"],
-      "rules": {
-        "jsx-a11y/anchor-is-valid": 0
-      }
-    }
-  ],
+  "root": true,
+  "extends": "next",
   "env": {
     "node": true,
     "commonjs": true,
     "browser": true,
     "es6": true
   }
-}
+}

beta/.husky/pre-commit

@@ -4,3 +4,4 @@
 cd beta
 yarn generate-ids
 git add -u src/pages/**/*.md
+yarn lint:fix

beta/package.json

@@ -7,7 +7,8 @@
     "analyze": "ANALYZE=true next build",
     "dev": "next",
     "build": "next build && node ./scripts/generateRSS.js",
-    "lint": "eslint 'src/**/*.{js,ts,tsx}'",
+    "lint": "next lint",
+    "lint:fix": "next lint --fix",
     "format:source": "prettier --config .prettierrc --write \"{plugins,src}/**/*.{js,ts,jsx,tsx}\"",
     "nit:source": "prettier --config .prettierrc --list-different \"{plugins,src}/**/*.{js,ts,jsx,tsx}\"",
     "prettier": "yarn format:source",
@@ -52,7 +53,8 @@
     "asyncro": "^3.0.0",
     "autoprefixer": "^10.3.1",
     "babel-eslint": "10.x",
-    "eslint": "6.x",
+    "eslint": "7.x",
+    "eslint-config-next": "12.0.3",
     "eslint-config-react-app": "^5.2.1",
     "eslint-plugin-flowtype": "4.x",
     "eslint-plugin-import": "2.x",

beta/src/components/MDX/CodeBlock/CodeBlock.tsx

@@ -21,7 +21,7 @@ interface InlineHiglight {
   endColumn: number;
 }
 
-const CodeBlock = React.forwardRef(
+const CodeBlock = React.forwardRef(function CodeBlock
   (
     {
       children,
@@ -37,7 +37,7 @@ const CodeBlock = React.forwardRef(
       noMarkers?: boolean;
     },
     ref?: React.Ref<HTMLDivElement>
-  ) => {
+  ) {
     const getDecoratedLineInfo = () => {
       if (!metastring) {
         return [];

beta/src/components/MDX/Link.tsx

@@ -34,28 +34,20 @@ function Link({
   return (
     <>
       {href.startsWith('https://') ? (
-        <ExternalLink
-          href={href}
-          className={cn(classes, className)}
-          {...props}
-          children={modifiedChildren}
-        />
+        <ExternalLink href={href} className={cn(classes, className)} {...props}>
+          {modifiedChildren}
+        </ExternalLink>
       ) : href.startsWith('#') ? (
         // eslint-disable-next-line jsx-a11y/anchor-has-content
-        <a
-          className={cn(classes, className)}
-          href={href}
-          {...props}
-          children={modifiedChildren}
-        />
+        <a className={cn(classes, className)} href={href} {...props}>
+          {modifiedChildren}
+        </a>
       ) : (
         <NextLink href={href.replace('.html', '')}>
           {/* eslint-disable-next-line jsx-a11y/anchor-has-content */}
-          <a
-            className={cn(classes, className)}
-            {...props}
-            children={modifiedChildren}
-          />
+          <a className={cn(classes, className)} {...props}>
+            {modifiedChildren}
+          </a>
         </NextLink>
       )}
     </>

beta/src/components/MDX/MDXComponents.tsx

@@ -234,8 +234,8 @@ function IllustrationBlock({
       ) : null}
       {sequential ? (
         <ol className="mdx-illustration-block flex">
-          {images.map((x: any) => (
-            <li className="flex-1">{x}</li>
+          {images.map((x: any, i: number) => (
+            <li className="flex-1" key={i}>{x}</li>
           ))}
         </ol>
       ) : (

beta/tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -17,8 +21,15 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "baseUrl": "src"
+    "baseUrl": "src",
+    "incremental": true
   },
-  "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }