Emit VSCode settings for TypeScript (#41710)

This makes sure that the TypeScript in the workspace can be enabled.

## 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/build/webpack/plugins/flight-types-plugin.ts

@@ -35,8 +35,8 @@ interface LayoutProps {
   params?: PageParams
 }
 
-type PageComponent = (props: PageProps) => React.ReactNode | null
-type LayoutComponent = (props: LayoutProps) => React.ReactNode | null
+type PageComponent = (props: PageProps) => React.ReactNode | Promise<React.ReactNode>
+type LayoutComponent = (props: LayoutProps) => React.ReactNode | Promise<React.ReactNode>
 
 interface IEntry {
   ${

packages/next/lib/typescript/writeVscodeConfigurations.ts

@@ -0,0 +1,50 @@
+import path from 'path'
+import { promises as fs } from 'fs'
+
+// Write .vscode settings to enable Next.js typescript plugin.
+export async function writeVscodeConfigurations(
+  baseDir: string
+): Promise<void> {
+  const vscodeSettings = path.join(baseDir, '.vscode', 'settings.json')
+  let settings: any = {}
+  let currentContent: string = ''
+
+  try {
+    currentContent = await fs.readFile(vscodeSettings, 'utf8')
+    settings = JSON.parse(currentContent)
+  } catch (err) {}
+
+  const libPath =
+    '.' + path.sep + path.join('node_modules', 'typescript', 'lib')
+  if (
+    settings['typescript.tsdk'] === libPath &&
+    settings['typescript.enablePromptUseWorkspaceTsdk']
+  ) {
+    return
+  }
+
+  settings['typescript.tsdk'] = libPath
+  settings['typescript.enablePromptUseWorkspaceTsdk'] = true
+
+  const content = JSON.stringify(settings, null, 2)
+
+  const vscodeFolder = path.join(baseDir, '.vscode')
+  try {
+    await fs.lstat(vscodeFolder)
+  } catch (e) {
+    await fs.mkdir(vscodeFolder, { recursive: true })
+  }
+
+  await fs.writeFile(vscodeSettings, content)
+
+  // Write to .gitignore if it exists
+  const gitIgnore = path.join(baseDir, '.gitignore')
+  try {
+    const gitIgnoreContent = await fs.readFile(gitIgnore, 'utf8')
+    if (!gitIgnoreContent.includes('.vscode')) {
+      await fs.writeFile(gitIgnore, `${gitIgnoreContent}\n.vscode\n`)
+    }
+  } catch (e) {
+    await fs.writeFile(gitIgnore, `vscode\n`)
+  }
+}

packages/next/lib/verifyTypeScriptSetup.ts

@@ -17,6 +17,7 @@ import { writeConfigurationDefaults } from './typescript/writeConfigurationDefau
 import { installDependencies } from './install-dependencies'
 import { isCI } from '../telemetry/ci-info'
 import { missingDepsError } from './typescript/missingDependencyError'
+import { writeVscodeConfigurations } from './typescript/writeVscodeConfigurations'
 
 const requiredPackages = [
   {
@@ -123,6 +124,10 @@ export async function verifyTypeScriptSetup({
     // Next.js' types:
     await writeAppTypeDeclarations(dir, !disableStaticImages)
 
+    if (isAppDirEnabled) {
+      await writeVscodeConfigurations(dir)
+    }
+
     let result
     if (typeCheckPreflight) {
       const { runTypeCheck } = require('./typescript/runTypeCheck')