Adds ESLint with default rule-set (vercel#23702)

This PR re-includes ESLint with some notable changes, namely a guided setup similar to how TypeScript is instantiated in a Next.js application.

To add ESLint to a project, developers will have to create an `.eslintrc` file in the root of their project or add an empty `eslintConfig` object to their `package.json` file.

```js
touch .eslintrc
```

Then running `next build` will show instructions to install the required packages needed:

<img width="862" alt="Screen Shot 2021-04-19 at 7 38 27 PM" src="https://user-images.githubusercontent.com/12476932/115316182-dfd51b00-a146-11eb-830c-90bad20ed151.png">

Once installed and `next build` is run again, `.eslintrc` will be automatically configured to include the default config:

```json
{
  "extends": "next"
}
```

In addition to this change:

- The feature is now under the experimental flag and requires opt-in. After testing and feedback, it will be switched to the top-level namespace and turned on by default.
- A new ESLint shareable configuration package is included that can be extended in any application with `{ extends: 'next' }`
  - This default config extends recommended rule sets from [`eslint-plugin-react`](https://www.npmjs.com/package/eslint-plugin-react), [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks), and [`eslint-plugin-next`](https://www.npmjs.com/package/@next/eslint-plugin-next)
- All rules in [`eslint-plugin-next`](https://www.npmjs.com/package/@next/eslint-plugin-next) have been modified to include actionable links that show more information to help resolve each issue

.eslintignore

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

errors/manifest.json

@@ -242,6 +242,7 @@
           "path": "/errors/next-start-serverless.md"
         },
         { "title": "no-cache", "path": "/errors/no-cache.md" },
+        { "title": "no-css-tags", "path": "/errors/no-css-tags.md" },
         {
           "title": "no-document-title",
           "path": "/errors/no-document-title.md"
@@ -250,6 +251,10 @@
           "title": "no-document-viewport-meta",
           "path": "/errors/no-document-viewport-meta.md"
         },
+        {
+          "title": "no-html-link-for-pages",
+          "path": "/errors/no-html-link-for-pages.md"
+        },
         {
           "title": "no-on-app-updated-hook",
           "path": "/errors/no-on-app-updated-hook.md"
@@ -258,6 +263,14 @@
           "title": "no-router-instance",
           "path": "/errors/no-router-instance.md"
         },
+        {
+          "title": "no-sync-scripts",
+          "path": "/errors/no-sync-scripts.md"
+        },
+        {
+          "title": "no-unwanted-polyfillio",
+          "path": "/errors/no-unwanted-polyfillio.md"
+        },
         {
           "title": "non-standard-node-env",
           "path": "/errors/non-standard-node-env.md"

errors/no-css-tags.md

@@ -0,0 +1,38 @@
+# No CSS Tags
+
+### Why This Error Occurred
+
+An HTML link element was used to link to an external stylesheet. This can negatively affect CSS resource loading on your web page.
+
+### Possible Ways to Fix It
+
+There are multiple ways to include styles using Next.js' built-in CSS support, including the option to use `@import` within the root stylesheet that is imported in `pages/_app.js`:
+
+```css
+/* Root stylesheet */
+@import 'extra.css';
+
+body {
+  /* ... */
+}
+```
+
+Another option is to use CSS Modules to import the CSS file scoped specifically to the component.
+
+```jsx
+import styles from './extra.module.css'
+
+export class Home {
+  render() {
+    return (
+      <div>
+        <button type="button" className={styles.active}>
+          Open
+        </button>
+      </div>
+    )
+  }
+}
+```
+
+Refer to the [Built-In CSS Support](https://nextjs.org/docs/basic-features/built-in-css-support) documentation to learn about all the ways to include CSS to your application.

errors/no-html-link-for-pages.md

@@ -0,0 +1,45 @@
+# No HTML link for pages
+
+### Why This Error Occurred
+
+An HTML anchor element, `<a>`, was used to navigate to a page route without using the `Link` component.
+
+The `Link` component is required in order to enable client-side route transitions between pages and provide a single-page app experience.
+
+### Possible Ways to Fix It
+
+Make sure to import the `Link` component and wrap anchor elements that route to different page routes.
+
+**Before:**
+
+```jsx
+function Home() {
+  return (
+    <div>
+      <a href="/about">About Us</a>
+    </div>
+  )
+}
+```
+
+**After:**
+
+```jsx
+import Link from 'next/link'
+
+function Home() {
+  return (
+    <div>
+      <Link href="/about">
+        <a>About Us</a>
+      </Link>
+    </div>
+  )
+}
+
+export default Home
+```
+
+### Useful Links
+
+- [next/link API Reference](https://nextjs.org/docs/api-reference/next/link)

errors/no-sync-scripts.md

@@ -0,0 +1,32 @@
+# No Sync Scripts
+
+### Why This Error Occurred
+
+A synchronous script was used which can impact your webpage's performance.
+
+### Possible Ways to Fix It
+
+#### Script component (experimental)
+
+Use the Script component with the right loading strategy to defer loading of the script until necessary.
+
+```jsx
+import Script from 'next/experimental-script'
+
+const Home = () => {
+  return (
+    <div class="container">
+      <Script src="https://third-party-script.js" strategy="defer"></Script>
+      <div>Home Page</div>
+    </div>
+  )
+}
+
+export default Home
+```
+
+Note: This is still an experimental feature and needs to be enabled via the `experimental.scriptLoader` flag in `next.config.js`.
+
+### Useful Links
+
+- [Efficiently load third-party JavaScript](https://web.dev/efficiently-load-third-party-javascript/)

errors/no-unwanted-polyfillio.md

@@ -0,0 +1,13 @@
+# Duplicate Polyfills from Polyfill.io
+
+#### Why This Error Occurred
+
+You are using Polyfill.io and including duplicate polyfills already shipped with Next.js. This increases page weight unnecessarily which can affect loading performance.
+
+#### Possible Ways to Fix It
+
+Remove all duplicate polyfills that are included with Polyfill.io. If you need to add polyfills but are not sure if Next.js already includes it, take a look at the list of [supported browsers and features](https://nextjs.org/docs/basic-features/supported-browsers-features) first.
+
+### Useful Links
+
+- [Supported Browsers and Features](https://nextjs.org/docs/basic-features/supported-browsers-features)

examples/with-eslint/.eslintrc

@@ -0,0 +1,4 @@
+{
+  "extends": "next",
+  "root": true
+}

examples/with-eslint/.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

examples/with-eslint/README.md

@@ -0,0 +1,23 @@
+# ESLint Example
+
+This example shows a Next.js application using the built-in ESLint setup with the `next` shareable configuration enabled in `.eslintrc`.
+
+Note: ESLint running during build (`next build`) is still experimental and needs to be enabled via an `{ experimental: eslint }` flag in `next.config.js`.
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-service-worker&project-name=with-service-worker&repository-name=with-service-worker)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-eslint with-eslint
+# or
+yarn create next-app --example with-eslint with-eslint
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

examples/with-eslint/next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  experimental: {
+    eslint: true,
+  },
+}

examples/with-eslint/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "with-eslint",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "next": "latest",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  },
+  "devDependencies": {
+    "eslint": "^7.24.0",
+    "eslint-config-next": "latest"
+  }
+}

examples/with-eslint/pages/index.js

@@ -0,0 +1,8 @@
+const Home = () => (
+  <div>
+    <script src="https://fake-script.com" />
+    <p>Home</p>
+  </div>
+)
+
+export default Home

packages/eslint-config-next/index.js

@@ -0,0 +1,55 @@
+/*
+ * @rushstack/eslint-patch is used to include plugins as dev
+ * dependencies instead of imposing them as peer dependencies
+ *
+ * https://www.npmjs.com/package/@rushstack/eslint-patch
+ */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+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: './parser.js',
+  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',
+    },
+    'import/parsers': {
+      [require.resolve('@typescript-eslint/parser')]: ['.ts', '.tsx', '.d.ts'],
+    },
+    'import/resolver': {
+      [require.resolve('eslint-import-resolver-node')]: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
+    },
+  },
+}

packages/eslint-config-next/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "eslint-config-next",
+  "version": "10.1.4-canary.15",
+  "description": "ESLint configuration used by NextJS.",
+  "main": "index.js",
+  "license": "MIT",
+  "repository": {
+    "url": "vercel/next.js",
+    "directory": "packages/eslint-config-next"
+  },
+  "dependencies": {
+    "@rushstack/eslint-patch": "^1.0.6",
+    "@next/eslint-plugin-next": "^10.1.3",
+    "@typescript-eslint/parser": "^4.20.0",
+    "eslint-import-resolver-node": "^0.3.4",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-react": "^7.23.1",
+    "eslint-plugin-react-hooks": "^4.2.0"
+  },
+  "peerDependencies": {
+    "eslint": "^7.23.0",
+    "next": ">=10.2.0",
+    "typescript": ">=3.3.1"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
+  }
+}

packages/eslint-config-next/parser.js

@@ -0,0 +1,9 @@
+const {
+  parse,
+  parseForESLint,
+} = require('next/dist/compiled/babel/eslint-parser')
+
+module.exports = {
+  parse,
+  parseForESLint,
+}

packages/eslint-plugin-next/lib/index.js

@@ -4,7 +4,6 @@ module.exports = {
     'no-sync-scripts': require('./rules/no-sync-scripts'),
     'no-html-link-for-pages': require('./rules/no-html-link-for-pages'),
     'no-unwanted-polyfillio': require('./rules/no-unwanted-polyfillio'),
-    'missing-preload': require('./rules/missing-preload'),
   },
   configs: {
     recommended: {
@@ -14,7 +13,6 @@ module.exports = {
         '@next/next/no-sync-scripts': 1,
         '@next/next/no-html-link-for-pages': 1,
         '@next/next/no-unwanted-polyfillio': 1,
-        '@next/next/missing-preload': 1,
       },
     },
   },