Next.js使用dynamic import后路由跳转无法加载antd样式问题求助

云原生阿岚

2026-9-28

问题根因

该问题是两项配置叠加导致的：

package.json中配置的"sideEffects": false会让webpack执行tree shake时默认判定所有模块无副作用，antd组件关联的css属于有副作用的静态资源，会被误剔除出生产构建产物
客户端路由跳转（包括router.replace、next/Link跳转）走的是前端JS渲染逻辑，只会加载当前路由增量依赖的资源，被误删的antd样式不会被加载；直接输入URL访问时走服务端渲染全量资源返回逻辑，所以样式正常

解决方案

1. 修正sideEffects配置

将package.json中的"sideEffects": false替换为如下配置，标记所有样式文件为有副作用资源，避免webpack误删：

"sideEffects": [
  "*.css",
  "*.less",
  "*.scss",
  "*.sass"
]

如果你使用babel-plugin-import实现antd按需加载，确认babel配置中样式引入规则正确：

{
  "plugins": [
    ["import", {
      "libraryName": "antd",
      "style": "css"
    }]
  ]
}

2. 优化重定向逻辑（可选）

你当前的重定向逻辑是在客户端useEffect中执行，会先触发首页渲染再跳转，容易引发资源加载时序问题。可以改用Next.js服务端重定向逻辑，在pages/index.tsx中新增getServerSideProps方法：

export async function getServerSideProps(context) {
  // 从请求cookie中判断用户登录状态
  const isLogged = checkUserLoginStatus(context.req.cookies)
  if (!isLogged) {
    return {
      redirect: {
        destination: '/auth',
        permanent: false
      }
    }
  }
  return { props: {} }
}