Next.js 13页面头部出现3个重复CSS链接问题求助

在Next.js 13的app/dashboard目录页面中，编译后的page.css被重复引入3次到head标签里，当前代码是在"use client"组件中直接导入了dashboard.scss。以下是几个实用的解决方向：

• 排查重复渲染与导入
  确认Dashboard组件是否被父组件（比如layout.js）或其他逻辑重复调用渲染，同时检查项目中是否有其他文件也导入了同一个dashboard.scss文件，重复导入会导致编译后生成多个CSS链接。

• 切换样式方案

  • 如果是全局样式需求：将dashboard.scss移至app目录下的全局样式文件（比如global.scss），仅在根layout.js中导入一次即可，避免在组件内重复导入。
  • 如果是组件隔离样式：改用CSS Modules，将文件重命名为dashboard.module.scss，Next.js会自动处理样式作用域，同时避免重复引入问题。修改后代码示例：

    "use client";
    import styles from "./dashboard.module.scss";
    
    const Dashboard = () => {
      return (
        <div className={styles.home}>
          <div className={styles.homeContainer}>
          </div>
        </div>
      );
    };
    
    export default Dashboard;
    

• 清理缓存重新构建
  Next.js的缓存可能导致资源引用异常，执行以下命令清理缓存后重启项目：

  rm -rf .next
  npm run dev
  

• 升级版本与检查配置
  部分旧版Next.js 13在app目录处理CSS存在bug，尝试升级到最新稳定版；同时检查next.config.js中是否有自定义的sass-loader或CSS打包配置，避免重复处理规则导致的问题。

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