Next.js页面导入Home.module.css样式出现404错误如何解决

按以下优先级逐一排查即可解决：

• 首先核对目录层级与相对路径
  导入语句import styles from '../styles/Home.module.css'生效的前提是：styles文件夹和pages文件夹同属项目根目录，结构如下：

  项目根目录/
  ├── pages/
  │   └── index.js
  ├── styles/
  │   └── Home.module.css
  ├── package.json
  └── next.config.js
  

  如果你用了src目录规范（pages存放在src/pages下），那导入路径要改成../../styles/Home.module.css；如果你把styles文件夹放在了pages目录内部，路径要改成./styles/Home.module.css。
• 核对文件命名准确性
  Next.js对CSS模块的命名规则校验严格：
  • 文件后缀必须是.module.css，注意大小写，不要写成.Module.css、.module.CSS这类错误格式
  • 文件名严格匹配大小写，home.module.css和Home.module.css会被识别为两个不同文件
  • 关闭系统的“隐藏已知文件扩展名”选项，确认文件没有被误命名为Home.module.css.txt这类带隐藏后缀的格式
• 检查版本与配置兼容性
  CSS模块是Next.js 9.3+版本默认支持的特性，低于该版本需要手动配置webpack loader，优先升级到官方稳定版：

  npm install next@latest react@latest react-dom@latest
  

  如果你在next.config.js中自定义过webpack的CSS解析规则，先临时注释自定义配置，用Next.js默认配置测试是否能正常加载，避免自定义规则覆盖默认解析逻辑。
• 清理缓存重试
  开发服务的旧缓存经常会导致路径解析异常：
  1. 停止正在运行的开发服务
  2. 删除项目根目录下的.next文件夹、node_modules/.cache文件夹
  3. 重新执行npm run dev启动服务
  4. 手动重新输入导入语句，避免复制粘贴带入不可见的特殊字符。

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