Next.js项目同时兼容JavaScript与TypeScript的配置问题咨询

• 首先调整tsconfig.json配置，这是你当前模块导入报错的核心原因：空的tsconfig被Next.js自动填充的默认配置未开启JS兼容，也未匹配你原项目的路径解析规则。替换为以下配置即可：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true, // 核心配置：允许编译JS文件，实现两种语言共存
    "skipLibCheck": true,
    "strict": false, // 可后续逐步开启严格模式，避免旧JS项目批量报错
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": ".", // 匹配原项目根目录导入规则，解决src开头模块找不到的问题
    // 如果原项目用了@/xxx这类路径别名，补充以下配置，和之前jsconfig.json的paths规则保持一致即可
    // "paths": {
    //   "@/*": ["./src/*"]
    // }
  },
  // 同时覆盖TS、JS类文件
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
  "exclude": ["node_modules"]
}

• 补充缺失的类型依赖：你之前安装的依赖缺少react-dom的类型声明，执行以下命令安装：
  npm install --save-dev @types/react-dom
• 清除缓存重启服务：删除项目根目录的.next缓存文件夹，再执行npm run dev启动服务即可。

如果之前你的项目可以正常导入scss文件，完成以上配置后不需要额外修改next.config.js就能正常运行，Next.js默认支持同项目混用JS、TS代码，后续新增文件用.ts/.tsx后缀即可。

内容的提问来源于stack exchange，提问作者Adi Gutner