Houssein Djirdeh e783b0a2e8

Adds ESLint with default rule-set (#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

2021-04-30 11:09:07 +00:00

809 B

Raw Blame History

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.

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

809 B Raw Blame History