Next.js自定义服务器TSX文件JSX语法报错及Babel配置问题

问题概述 #

• 操作流程：创建Next.js应用 → 完成应用准备 → 使用处理器处理请求
• 报错信息：

语法错误：当前未启用对实验性语法 'jsx' 的支持 (5:5):

• 附加情况：
  • 自定义服务器在纯React项目中运行正常，但处理TSX文件时触发上述错误
  • 已添加Babel React预设，但问题未解决
  • 使用.babelrc文件执行next build可成功运行，改用.babelrc.js则失败，同时出现提示：

信息  - 正在使用来自 next/next-dekjs/.babelrc.js 的外部 babel 配置

解决方案 #

1. 修正.babelrc.js配置 #

确保配置中同时包含TypeScript和React预设，且优先使用Next.js官方的babel预设，示例配置如下：

module.exports = {
  presets: [
    'next/babel',
    '@babel/preset-typescript',
    ['@babel/preset-react', { runtime: 'automatic' }]
  ]
};

next/babel会整合Next.js所需的编译规则，必须放在最前面；@babel/preset-typescript用于解析TSX文件的类型语法，缺一不可。

2. 避免版本冲突 #

如果使用较新版本的Next.js，不要单独配置React和TypeScript预设，直接依赖next/babel即可，它已内置兼容的预设组合，减少版本不匹配问题。

3. 检查自定义服务器逻辑 #

自定义服务器不要手动添加TSX文件的编译规则，完全交由Next.js处理请求，避免干扰Next.js默认的编译流程。

4. 清除缓存重试 #

执行以下命令清除缓存和依赖，重新安装后构建：

rm -rf .next node_modules
npm install
next build

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