从React迁移至Next.js 13开发计算器时遇CSS预加载警告

问题根源 #

• Next.js 13的App Router对CSS的处理逻辑和传统React、Pages Router不一样，要是组件的独立CSS导入路径不对或者没被实际引用，就会出现预加载了但没用到的情况
• 警告里的%20是空格的URL编码，说明你的CSS文件路径里有空格，或者导入路径写错了，导致预加载的资源没法被正确识别

解决步骤 #

1. 检查并修正CSS路径
   • 把所有CSS文件名和导入路径里的空格去掉，确保文件名和组件里的导入语句完全匹配，比如把 page.css改成page.css，同时更新组件里的import './ page.css'为import './page.css'
2. 按App Router规则导入CSS
   • 在Next.js 13的App Router里，直接把组件的CSS导入到对应的组件文件里就行，别乱在全局导入
   • 示例代码：

     import './Calculator.css';
     
     export default function Calculator() {
       // 组件代码
     }
     

   • 只在layout.js里导入全局通用的样式，别把没用到的组件CSS也塞进去
3. 确认预加载的as属性
   • 要是你手动加了预加载的link标签，得确保as属性设成style，不然浏览器不知道预加载的是样式文件
   • 错误写法：

     <link rel="preload" href="/next/static/css/app/page.css" as="script" />
     

   • 正确写法：

     <link rel="preload" href="/next/static/css/app/page.css" as="style" />
     

4. 清理无用CSS文件
   • 检查项目里有没有没被任何组件导入的CSS文件，这类文件会被Next.js预加载但完全没用，直接删掉就好

小提示：开发模式下可以用Next.js自带的CSS分析功能，看看哪些CSS是真的被用到了，方便快速定位问题

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