在 Next.js 15 项目中引入 Ant Design 组件库：next.config.ts 兼容性配置
望舒
标签：
Next.js 15 Ant Design 配置Next.js transpilePackagesantdNext.js 15 引入 antd 报错解决SyntaxError Cannot use import statement outside a moduleNext.js
在 Next.js 15 项目中直接引入 Ant Design (antd) 组件库时，很多开发者会遇到以下错误：
SyntaxError: Cannot use import statement outside a moduleModule parse failed: Unexpected token
这是因为 Ant Design 及其依赖的部分 rc-* 包发布时采用了 ESM 语法，而 Next.js 默认并不会对 node_modules 中的这些依赖进行转译。要解决这个问题，我们需要在 next.config.ts 中使用 transpilePackages 配置，让 Next.js 的 SWC/webpack 对这些依赖进行转译，从而避免构建时报错。
Next.js 15 配置 Ant Design 兼容性
在项目根目录下修改 next.config.ts，添加以下配置：
复制
展开
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
transpilePackages: [
"antd",
"@ant-design/icons",
"@ant-design/icons-svg",
"@rc-component/util",
"rc-util",
"rc-input",
"rc-pagination",
"rc-picker",
"rc-field-form",
"rc-dialog",
"rc-collapse",
"rc-motion",
"rc-overflow",
"rc-select",
"rc-tabs",
"rc-tree",
"rc-resize-observer",
"rc-virtual-list",
],
};
export default nextConfig;
配置说明
transpilePackages：指定需要转译的第三方依赖，确保它们在构建过程中被 SWC/webpack 处理。- Ant Design 依赖链：Ant Design 本身依赖多个
rc-*组件包，如果不转译这些依赖，可能会在开发或生产环境中出现构建失败。 - 全面转译：建议一次性将
antd及其常用依赖（如上）全部加入transpilePackages，避免遗漏导致问题。
常见问题
1. 如果不配置会怎样？
- 本地开发 (
next dev) 可能正常，但在 生产构建 (next build) 时会报错。 - 典型错误：
Unexpected token export或SyntaxError: Cannot use import statement outside a module。
2. 只转译 antd 不行吗？
- 不行。
antd内部依赖了多个rc-*包，如果只配置antd，部分依赖仍会报错。
3. 性能会不会受影响？
transpilePackages只在构建时生效，对运行时性能影响极小。- 构建速度可能略有增加，但这是稳定使用 Ant Design 在 Next.js 15 中的必要代价。
作者：https://blog.xn--rpv331d.com/望舒
链接：https://blog.xn--rpv331d.com/望舒/blog/98
转载注意保留文章出处...
No data