全新Next.js(TypeScript版)安装后VSCode出现大量TS错误问题

核心原因 #

VSCode内置的TypeScript版本和Next.js项目本地依赖的TypeScript版本不一致，导致语法校验出现偏差。

修复步骤 #

1. 指定VSCode使用项目本地TS版本

   • 打开VSCode命令面板（快捷键Ctrl+Shift+P / Cmd+Shift+P）
   • 输入TypeScript: Select TypeScript Version...
   • 选择Use workspace version（对应项目node_modules/typescript下的版本）

2. 清除项目与VSCode缓存

   • 关闭VSCode
   • 删除项目根目录下的.next文件夹和node_modules/.cache文件夹
   • 重新打开项目，等待TS服务自动重启

3. 恢复默认TS配置

   • 检查项目根目录的tsconfig.json，确保配置与create-next-app生成的默认内容一致，关键配置如下：

     {
       "compilerOptions": {
         "target": "ES2017",
         "lib": ["dom", "dom.iterable", "esnext"],
         "allowJs": true,
         "skipLibCheck": true,
         "strict": true,
         "forceConsistentCasingInFileNames": true,
         "noEmit": true,
         "esModuleInterop": true,
         "module": "esnext",
         "moduleResolution": "bundler",
         "resolveJsonModule": true,
         "isolatedModules": true,
         "jsx": "preserve",
         "incremental": true,
         "plugins": [{"name": "next"}]
       },
       "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
       "exclude": ["node_modules"]
     }
     

4. 重启TS服务

   • 打开命令面板，输入TypeScript: Restart TS Server
   • 等待服务重启后查看报错是否消失

内容的提问来源于stack exchange，提问作者Level Up Developers