Next.js14自定义Babel配置致SWC禁用与next/font冲突问题求助

运行 npm run dev 时的报错信息 #

npm run dev

> my-portfolio@0.1.0 dev
> next dev

 ⚠ Port 3000 is in use, trying 3001 instead.
   ▲ Next.js 14.1.0
   - Local:        http://localhost:3001

 ⚠ Invalid next.config.mjs options detected: 
 ⚠     Unrecognized key(s) in object: 'optimizeFonts' at "experimental"
 ⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config
   Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
 ✓ Ready in 1350ms
   Using external babel configuration from /Users/(omission)/Documents/Personal/React/my-portfolio/.babelrc
 ⚠ It looks like there is a custom Babel configuration that can be removed.
 ○ Compiling /not-found ...
 ⨯ ./src/app/layout.tsx:2:1
Syntax error: "next/font" requires SWC although Babel is being used due to a custom babel config being present.
Read more: https://nextjs.org/docs/messages/babel-font-loader-conflict
 ⨯ ./src/app/layout.tsx:2:1
Syntax error: "next/font" requires SWC although Babel is being used due to a custom babel config being present.
Read more: https://nextjs.org/docs/messages/babel-font-loader-conflict
 ✓ Compiled / in 80ms (417 modules)
 ⚠ Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload

问题背景 #

报错核心是next/font 依赖SWC编译，但自定义Babel配置导致Next.js强制使用Babel而非SWC，从而引发冲突。保留Babel是为了用Jest测试Next.js组件，此前参考日文教程配置的Babel流程如下：

1. 安装测试依赖

npm i -D jest @testing-library/react @types/jest @testing-library/jest-dom @testing-library/dom babel-jest @testing-library/user-event jest-css-modules

2. 创建 .babelrc 配置文件

{
    "presets": ["next/babel"]
}

3. 在 package.json 中添加Jest配置

"jest": {
    "testPathIgnorePatterns": [
        "<rootDir>/.next/",         // 排除测试目录
        "<rootDir>/node_modules/"
    ],
    "moduleNameMapper": {          // 使用jest-css-modules mock CSS文件
        "\\.(css)$": "<rootDir>/node_modules/jest-css-modules"
    }
}

4. 添加测试脚本到 package.json

"scripts": {
    ...
    "test": "jest --env=jsdom --verbose"  // 新增测试命令
},

测试脚本示例：

import "@testing-library/jest-dom/";
import { render, screen } from "@testing-library/react";
import Page from "../src/app/page";

// 测试页面组件
test("renders the page", () => {
  render(<Page />);
  expect(screen.getByText(/Get started by editing/)).toBeInTheDocument();
});

项目结构：

已尝试的解决方案 #

曾在 next.config.mjs 中尝试禁用字体优化，但报错依旧：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    optimizeFonts: false,
  },
};

export default nextConfig;

环境信息 #

• Node.js版本：v18.17.0
• Next.js版本：14.1.0
• TypeScript版本：5.3.3
• 系统：macOS Monterey 12.6.7

求助需求 #

如何解决next/font与Babel的冲突？或者有没有其他无需依赖自定义Babel即可在Next.js 14中使用Jest的方案？

解决方案 #

方案1：移除自定义Babel配置，改用SWC兼容的Jest配置 #

Next.js 12+ 默认支持用SWC替代Babel做编译，Jest也支持SWC作为测试转换器，无需保留 .babelrc。步骤如下：

1. 卸载 babel-jest，安装SWC相关测试依赖

npm uninstall babel-jest
npm i -D @swc/jest @swc/core

2. 删除项目根目录的 .babelrc 文件

3. 修改 package.json 中的Jest配置，替换为SWC相关配置：

"jest": {
  "testPathIgnorePatterns": [
    "<rootDir>/.next/",
    "<rootDir>/node_modules/"
  ],
  "transform": {
    "^.+\\.(t|j)sx?$": "@swc/jest"
  },
  "moduleNameMapper": {
    "\\.(css)$": "<rootDir>/node_modules/jest-css-modules"
  }
}

4. 保留原测试脚本和测试文件不变，重新运行 npm run test 验证测试正常，再运行 npm run dev 即可解决next/font的冲突问题。

方案2：保留Babel配置，替换next/font为其他字体方案 #

如果必须保留Babel配置，可以放弃使用 next/font，改用传统的字体引入方式：

• 在 layout.tsx 中移除 next/font 的导入
• 通过 link 标签引入Google字体或本地字体文件
• 配置Tailwind CSS（如果使用）或CSS模块来应用字体样式

方案3：为测试单独配置Babel，避免影响开发环境 #

可以将Babel配置仅作用于测试环境，不影响Next.js的SWC编译：

1. 将 .babelrc 重命名为 babel.config.js，并添加环境判断：

module.exports = {
  env: {
    test: {
      presets: ["next/babel"]
    }
  }
};

2. 确保 next.config.mjs 中没有强制启用Babel的配置，Next.js会自动在开发/生产环境使用SWC，仅测试时使用Babel。
3. 运行 npm run dev 验证冲突是否解决，同时测试脚本正常运行。

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