Add TypeScript plugin (#41569)

This PR implements the TypeScript plugin (only applied to the app directory), and it will be automatically added to tsconfig.json when running the CLI. Due to how TS plugins work (a package name is required to specify), hence we can't use a subpath import like `next/typescript` for the plugin. To avoid installing a separate dependency, here I propose to reuse the `next` package: if the default export is called with the TypeScript option, we can say it's being used as a plugin. There is also environment variables we can check here, however it's specifically for VS Code (`VSCODE_CLI=1`) where this plugin should be working with other editors too.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)

packages/next/lib/typescript/writeConfigurationDefaults.ts

@@ -187,6 +187,27 @@ export async function writeConfigurationDefaults(
     )
   }
 
+  // Enable the Next.js typescript plugin.
+  if (isAppDirEnabled) {
+    if (userTsConfig.compilerOptions) {
+      if (!('plugins' in userTsConfig.compilerOptions)) {
+        userTsConfig.compilerOptions.plugins = []
+      }
+      if (
+        !userTsConfig.compilerOptions.plugins.some(
+          (plugin: { name: string }) => plugin.name === 'next'
+        )
+      ) {
+        userTsConfig.compilerOptions.plugins.push({ name: 'next' })
+        suggestedActions.push(
+          chalk.cyan('plugins') +
+            ' was updated to add ' +
+            chalk.bold(`{ name: 'next' }`)
+        )
+      }
+    }
+  }
+
   if (!('exclude' in rawConfig)) {
     userTsConfig.exclude = ['node_modules']
     suggestedActions.push(

packages/next/lib/verifyTypeScriptSetup.ts

@@ -1,5 +1,6 @@
 import chalk from 'next/dist/compiled/chalk'
 import path from 'path'
+
 import {
   hasNecessaryDependencies,
   NecessaryDependencies,