Next.js项目JS转TS后JSX语法报错问题求助

核心原因 #

1. 文件扩展名错误：TypeScript仅会解析.tsx后缀的文件中的JSX语法，若你的组件使用.ts后缀，会直接触发JSX语法错误。
2. tsconfig.jsx配置冲突：Next.js对JSX转换有专属编译逻辑，手动设置jsx: "react"会打破Next.js的原有流程，导致开发服务器报错。

分步解决 #

1. 修正组件文件扩展名 #

确保EmailSubmissionComponent的文件后缀为.tsx，而非.ts。

2. 调整tsconfig.json的jsx配置 #

根据你的Next.js路由模式选择对应配置：

• Pages Router（传统pages目录）：设置jsx: "react-jsx"
• App Router（13+ app目录）：设置jsx: "preserve"

示例tsconfig.json核心配置：

{
  "compilerOptions": {
    // 二选一，根据你的路由模式
    "jsx": "react-jsx", 
    // "jsx": "preserve",
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

3. 排查JSX语法细节 #

如果调整后仍有错误，检查以下点：

• 所有自闭合标签（如<img>、<input>）必须写成<img />、<input />格式
• 确保JSX中使用的变量/Props都已正确定义且类型匹配
• Next.js专属组件（如Link、Image）需按TS要求导入并使用（比如Link的href需为合法路由字符串）

4. 重启开发服务器 #

修改配置后，重启开发服务让配置生效：

npm run dev

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