This PR introduces an improved developer experience when `next lint` is run for the first time.
### Current behavior
`eslint-config-next` is a required package that must be installed before proceeding with `next lint` or `next build`:
Although this has helped many developers start using the new ESLint config, this has also resulted in a few issues:
- Users are required to install the full config (`eslint-config-next`) even if they do not use it or use the Next.js plugin directly (`eslint-plugin-next`).
- #26348
- There's some confusion on why `eslint-config-next` needs to be installed or how it should be used instead of `eslint-plugin-next`.
- #26574
- #26475
- #26438
### New behavior
Instead of enforcing `eslint-config-next` as a required package, this PR prompts the user by asking what config they would like to start. This happens when `next lint` is run for the first time **and** if no ESLint configuration is detected in the application.
<img src="https://user-images.githubusercontent.com/12476932/124331177-e1668a80-db5c-11eb-8915-38d3dc20f5d4.gif" width="800" />
- The CLI will take care of installing `eslint` or `eslint-config-next` if either is not already installed
- Users now have the option to choose between a strict configuration (`next/core-web-vitals`) or just the base configuration (`next`)
- For users that decide to create their own ESLint configuration, or already have an existing one, **installing `eslint-config-next` will not be a requirement for `next lint` or `next build` to run**. A warning message will just show if the Next.js ESLint plugin is not detected in an ESLint config.
<img width="682" alt="Screen Shot 2021-06-25 at 3 02 12 PM" src="https://user-images.githubusercontent.com/12476932/123473329-6cc4a680-d5c6-11eb-9a57-d5c0b89a2732.png">
---
In addition, this PR also:
- Fixes#26348
- Updates documentation to make it more clear what approach to take for new and existing ESLint configurations
## Documentation / Examples
- [x] Make sure the linting passes
### Changes
* Corrected the file extension reference from .tsx to .ts for ```packages/create-next-app/templates/typescript/README-template.md```.
This matches the actual file extension and avoids confusion for new users.
Previous TypeScript template in `create-next-app` only had the following in `next-env.d.ts`
```ts
/// <reference types="next" />
/// <reference types="next/types/global" />
```
New `next-env.d.ts` has this:
```ts
/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next/image-types/global" />
```
Next.js automatically adds the `image-types` reference, but it won't be included in the initial commit.
## Documentation / Examples
- [x] Make sure the linting passes
This Pull Request adds [Alex](https://alexjs.com/) to our documentation. It catches insensitive, inconsiderate writing.
The original PR (https://github.com/vercel/next.js/pull/25821) is too large so I have decided to break it down into smaller PRs. This PR is the first part. Then I will continue to add the rest of the documentation in smaller PRs.
## More Information on Alex:
https://alexjs.com/https://github.com/get-alex/alex
## Documentation / Examples
- [x] Make sure the linting passes
Since #24655 landed in 10.2.1, I wanted to update the documentation, especially for the top Google results for "next typescript", so that users know how to create a TS project.
Please feel free to change anything you feel is appropriate.
