为何Next.js无法识别.tsx与.ts文件中的TS代码？无接口声明页面可正常打开

相关问题截图 #

检查依赖完整性 #

确保项目已安装TypeScript及React、Node的类型依赖，未安装则执行：

npm install --save-dev typescript @types/react @types/node
# 或使用yarn
yarn add --dev typescript @types/react @types/node

确认tsconfig.json配置 #

项目根目录必须存在tsconfig.json，无则运行npx tsc --init生成，或手动创建基础配置：

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

升级Next.js到兼容版本 #

确保Next.js版本支持TypeScript，建议升级到最新稳定版：

npm install next@latest react@latest react-dom@latest
# 或使用yarn
yarn add next@latest react@latest react-dom@latest

验证文件与配置匹配 #

确认所有TypeScript文件后缀为.ts/.tsx，且tsconfig.json的include字段包含这些文件路径，未被exclude排除。

清理缓存重启服务 #

删除.next和node_modules/.cache文件夹，再重启开发服务器：

rm -rf .next node_modules/.cache
npm run dev
# 或使用yarn
yarn dev

排查接口语法错误 #

仅带接口的页面出问题时，仔细检查接口代码的语法：是否存在拼写错误、缺少分号、类型定义不合法等情况，TypeScript语法错误会导致Next.js编译失败。

内容的提问来源于stack exchange，提问作者Maksim Epifanov