在Next.js新项目中配置StyleX遇冲突及next/font错误求助

DevOps 小满

2026-7-3

解决Next.js + StyleX配置冲突及"next/font requires SWC"错误

问题核心

你遇到的错误有两个根源：

next.config.js中重复导出配置，导致StyleX插件未生效
自定义.babelrc.js强制Next.js使用Babel编译，与next/font依赖的SWC特性冲突

解决方案

1. 修复`next.config.js`的导出错误

你当前的代码中，先通过stylexPlugin处理了配置，但随后又重新导出原始的nextConfig，直接覆盖了插件的处理结果。修改为：

/** @type {import('next').NextConfig} */
const stylexPlugin = require("@stylexjs/nextjs-plugin");

const nextConfig = {
  reactStrictMode: true,
};

// 只保留这一行导出，确保StyleX插件生效
module.exports = stylexPlugin({
  rootDir: __dirname,
})(nextConfig);

2. 删除自定义的`.babelrc.js`文件

@stylexjs/nextjs-plugin已经自动集成了StyleX所需的Babel插件配置，手动添加.babelrc.js会强制Next.js切换到Babel编译流程，而next/font依赖SWC的原生支持，因此触发冲突。

3. 若需添加其他Babel插件（可选）

如果需要额外配置Babel插件，不要使用.babelrc.js，而是在next.config.js的babel字段中配置：

/** @type {import('next').NextConfig} */
const stylexPlugin = require("@stylexjs/nextjs-plugin");

const nextConfig = {
  reactStrictMode: true,
  babel: {
    plugins: [
      // 在这里添加你的其他Babel插件，例如：
      // ["@babel/plugin-proposal-decorators", { legacy: true }]
    ],
  },
};

module.exports = stylexPlugin({
  rootDir: __dirname,
})(nextConfig);