Adds ESLint with default rule-set

.eslintignore

@@ -2,6 +2,7 @@ node_modules
 **/.next/**
 **/_next/**
 **/dist/**
+e2e-tests/**
 examples/with-typescript-eslint-jest/**
 examples/with-kea/**
 packages/next/bundles/webpack/packages/*.runtime.js
@@ -16,4 +17,5 @@ packages/next-codemod/**/*.js
 packages/next-codemod/**/*.d.ts
 packages/next-env/**/*.d.ts
 test/integration/async-modules/**
+test/integration/eslint/**
 test-timings.json

packages/eslint-config-next/index.js

@@ -0,0 +1,39 @@
+module.exports = {
+  extends: [
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:@next/next/recommended',
+  ],
+  plugins: ['import', 'react'],
+  rules: {
+    'import/no-anonymous-default-export': 'warn',
+    'react/react-in-jsx-scope': 'off',
+  },
+  parser: '@babel/eslint-parser',
+  parserOptions: {
+    requireConfigFile: false,
+    sourceType: 'module',
+    allowImportExportEverywhere: true,
+    babelOptions: {
+      presets: ['next/babel'],
+    },
+  },
+  overrides: [
+    {
+      files: ['**/*.ts?(x)'],
+      parser: '@typescript-eslint/parser',
+      parserOptions: {
+        sourceType: 'module',
+        ecmaFeatures: {
+          jsx: true,
+        },
+        warnOnUnsupportedTypeScriptVersion: true,
+      },
+    },
+  ],
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+}

packages/eslint-config-next/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "eslint-config-next",
+  "version": "10.1.3",
+  "description": "ESLint configuration used by NextJS.",
+  "main": "index.js",
+  "license": "MIT",
+  "repository": {
+    "url": "vercel/next.js",
+    "directory": "packages/eslint-config-next"
+  },
+  "peerDependencies": {
+    "@babel/core": "^7.13.14",
+    "@babel/eslint-parser": "^7.13.14",
+    "@next/eslint-plugin-next": "^10.1.3",
+    "@typescript-eslint/parser": "^4.20.0",
+    "eslint": "^7.23.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-react": "^7.23.1",
+    "eslint-plugin-react-hooks": "^4.2.0"
+  },
+  "peerDependenciesMeta": {
+    "@typescript-eslint/parser": {
+      "optional": true
+    }
+  }
+}

packages/eslint-plugin-next/lib/rules/missing-preload.js

@@ -19,7 +19,7 @@ module.exports = {
             context.report({
               node: linkNode,
               message:
-                'Stylesheet does not have an associated preload tag. This could potentially impact First paint.',
+                'Stylesheet does not have an associated preload tag. This could potentially impact First paint. See: https://web.dev/preload-critical-assets/.',
               fix: function (fixer) {
                 return fixer.insertTextBefore(
                   linkNode,

packages/eslint-plugin-next/lib/rules/no-css-tags.js

@@ -26,7 +26,7 @@ module.exports = function (context) {
         context.report({
           node,
           message:
-            'In order to use external stylesheets use @import in the root stylesheet compiled with NextJS. This ensures proper priority to CSS when loading a webpage.',
+            'In order to use external stylesheets use @import in the root stylesheet compiled with NextJS. This ensures proper priority to CSS when loading a webpage. See: https://nextjs.org/docs/basic-features/built-in-css-support.',
         })
       }
     },

packages/eslint-plugin-next/lib/rules/no-html-link-for-pages.js

@@ -1,10 +1,18 @@
 const path = require('path')
 const fs = require('fs')
-const { getUrlFromPagesDirectory, normalizeURL } = require('../utils/url')
+const {
+  getUrlFromPagesDirectory,
+  normalizeURL,
+  execOnce,
+} = require('../utils/url')
+
+const pagesDirWarning = execOnce((pagesDirs) => {
+  console.warn(
+    `Pages directory cannot be found at ${pagesDirs.join(' or ')}. ` +
+      `If using a custom path, please configure with the no-html-link-for-pages rule in your eslint config file`
+  )
+})
 
-//------------------------------------------------------------------------------
-// Rule Definition
-//------------------------------------------------------------------------------
 module.exports = {
   meta: {
     docs: {
@@ -26,10 +34,8 @@ module.exports = {
         ]
     const pagesDir = pagesDirs.find((dir) => fs.existsSync(dir))
     if (!pagesDir) {
-      throw new Error(
-        `Pages directory cannot be found at ${pagesDirs.join(' or ')}. ` +
-          `If using a custom path, please configure with the no-html-link-for-pages rule`
-      )
+      pagesDirWarning(pagesDirs)
+      return {}
     }
 
     const urls = getUrlFromPagesDirectory('/', pagesDir)
@@ -61,7 +67,7 @@ module.exports = {
           if (url.test(normalizeURL(hrefPath))) {
             context.report({
               node,
-              message: `You're using <a> tag to navigate to ${hrefPath}. Use Link from 'next/link' to make sure the app behaves like an SPA.`,
+              message: `You're using <a> tag to navigate to ${hrefPath}. Use Link from 'next/link' to make sure the app behaves like an SPA. See: https://nextjs.org/docs/api-reference/next/link.`,
             })
           }
         })

packages/eslint-plugin-next/lib/rules/no-sync-scripts.js

@@ -18,7 +18,7 @@ module.exports = function (context) {
         context.report({
           node,
           message:
-            "A synchronous script tag can impact your webpage's performance",
+            "A synchronous script tag can impact your webpage's performance. See: https://web.dev/efficiently-load-third-party-javascript/.",
         })
       }
     },

packages/eslint-plugin-next/lib/rules/no-unwanted-polyfillio.js

@@ -95,7 +95,7 @@ module.exports = {
           if (unwantedFeatures.length > 0) {
             context.report({
               node,
-              message: `You're requesting polyfills from polyfill.io which are already shipped with NextJS. Please remove ${unwantedFeatures.join(
+              message: `You're requesting polyfills from polyfill.io which are already shipped with NextJS (see: https://nextjs.org/docs/basic-features/supported-browsers-features). Please remove ${unwantedFeatures.join(
                 ', '
               )} from the features list.`,
             })

packages/eslint-plugin-next/lib/utils/url.js

@@ -76,7 +76,21 @@ function normalizeURL(url) {
   return url
 }
 
+function execOnce(fn) {
+  let used = false
+  let result
+
+  return (...args) => {
+    if (!used) {
+      used = true
+      result = fn(...args)
+    }
+    return result
+  }
+}
+
 module.exports = {
   getUrlFromPagesDirectory,
   normalizeURL,
+  execOnce,
 }

packages/next/build/index.ts

@@ -26,6 +26,7 @@ import loadCustomRoutes, {
 } from '../lib/load-custom-routes'
 import { nonNullable } from '../lib/non-nullable'
 import { recursiveDelete } from '../lib/recursive-delete'
+import { verifyAndLint } from '../lib/verifyAndLint'
 import { verifyTypeScriptSetup } from '../lib/verifyTypeScriptSetup'
 import {
   BUILD_ID_FILE,
@@ -191,6 +192,20 @@ export default async function build(
       typeCheckingSpinner.stopAndPersist()
     }
 
+    if (config.experimental.eslint) {
+      await nextBuildSpan
+        .traceChild('verify-and-lint')
+        .traceAsyncFn(async () => {
+          verifyAndLint(
+            dir,
+            pagesDir,
+            config.experimental.cpus,
+            config.experimental.workerThreads,
+            !ignoreTypeScriptErrors
+          )
+        })
+    }
+
     const buildSpinner = createSpinner({
       prefixText: `${Log.prefixes.info} Creating an optimized production build`,
     })

packages/next/lib/eslint/ESLintCompileError.ts

@@ -0,0 +1 @@
+export class ESLintCompileError extends Error {}

packages/next/lib/eslint/ESLintFatalError.ts

@@ -0,0 +1 @@
+export class ESLintFatalError extends Error {}

packages/next/lib/eslint/customFormatter.ts

@@ -0,0 +1,80 @@
+import chalk from 'chalk'
+import path from 'path'
+
+export enum MessageSeverity {
+  Warning = 1,
+  Error = 2,
+}
+
+interface LintMessage {
+  ruleId: string | null
+  severity: 1 | 2
+  message: string
+  line: number
+  column: number
+}
+
+interface LintResult {
+  filePath: string
+  messages: LintMessage[]
+  errorCount: number
+  warningCount: number
+  output?: string
+  source?: string
+}
+
+function formatMessage(
+  dir: string,
+  messages: LintMessage[],
+  filePath: string
+): string | void {
+  let fileName = path.posix.normalize(
+    path.relative(dir, filePath).replace(/\\/g, '/')
+  )
+
+  if (!fileName.startsWith('.')) {
+    fileName = './' + fileName
+  }
+
+  let output = '\n' + chalk.cyan(fileName)
+
+  for (let i = 0; i < messages.length; i++) {
+    const { message, severity, line, column, ruleId } = messages[i]
+
+    output = output + '\n'
+
+    if (line && column) {
+      output =
+        output +
+        chalk.yellow(line.toString()) +
+        ':' +
+        chalk.yellow(column.toString()) +
+        '  '
+    }
+
+    if (severity === MessageSeverity.Warning) {
+      output += chalk.yellow.bold('Warning') + ': '
+    } else {
+      output += chalk.red.bold('Error') + ': '
+    }
+
+    output += message
+
+    if (ruleId) {
+      output += '  ' + chalk.gray.bold(ruleId)
+    }
+  }
+
+  return output
+}
+
+export function formatResults(baseDir: string, results: LintResult[]): string {
+  return (
+    results
+      .filter(({ messages }) => messages?.length)
+      .map(({ messages, filePath }) =>
+        formatMessage(baseDir, messages, filePath)
+      )
+      .join('\n') + '\n'
+  )
+}

packages/next/lib/eslint/getLintIntent.ts

@@ -0,0 +1,32 @@
+import { promises as fs } from 'fs'
+
+import * as CommentJson from 'next/dist/compiled/comment-json'
+
+export type LintIntent = { firstTimeSetup: boolean }
+
+export async function getLintIntent(
+  eslintrcFile: string | null,
+  pkgJsonEslintConfig: string | null
+): Promise<LintIntent | false> {
+  if (eslintrcFile) {
+    const content = await fs.readFile(eslintrcFile, { encoding: 'utf8' }).then(
+      (txt) => txt.trim().replace(/\n/g, ''),
+      () => null
+    )
+
+    // User is setting up ESLint for the first time setup if eslint config exists but is empty
+    return {
+      firstTimeSetup:
+        content === '' ||
+        content === '{}' ||
+        content === '---' ||
+        content === 'module.exports = {}',
+    }
+  } else if (pkgJsonEslintConfig) {
+    return {
+      firstTimeSetup: CommentJson.stringify(pkgJsonEslintConfig) === '{}',
+    }
+  }
+
+  return false
+}