NextJS项目中_app.tsx文件语法错误求助

可能原因及对应解决步骤 #

1. 检查TypeScript配置文件（tsconfig.json） #

• 确保compilerOptions中启用适配的模块配置，同时保留NextJS要求的关键项：
  • module设为ESNext或ES2020+
  • moduleResolution设为node或nodenext
  • isolatedModules保持true（NextJS默认开启，修改会导致语法解析异常）
• 示例配置片段：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "node",
    "isolatedModules": true,
    "jsx": "preserve",
    "strict": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

2. 确认TypeScript与NextJS版本兼容性 #

• import type是TypeScript 3.8+的语法，执行npm list typescript查看当前版本，确保≥3.8
• 若版本过低，升级核心依赖：

npm install next@latest react@latest react-dom@latest

3. 检查项目TypeScript识别配置 #

• 确保项目根目录存在tsconfig.json，NextJS会自动以此识别TypeScript项目；若没有，运行npx create-next-app --typescript生成基础配置后迁移代码
• 确认_app.tsx文件名后缀正确，不要误改为.jsx

4. 排查自定义脚本的影响 #

• 你编写的自定义脚本可能修改了Webpack/Babel配置，导致TypeScript语法解析失效：
  • 查看next.config.js中的自定义webpack配置，确保babel-loader能正确处理TypeScript语法
  • 若使用自定义Babel配置（.babelrc或babel.config.json），添加对应插件并配置TSX支持：

{
  "presets": ["next/babel"],
  "plugins": [
    ["@babel/plugin-syntax-typescript", { "isTSX": true }]
  ]
}

5. 彻底清理缓存 #

• 除删除node_modules外，清理NextJS缓存目录：
  • Linux/macOS：rm -rf .next
  • Windows：rd /s /q .next
• 重新启动开发服务器：npm run dev

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