Next.js 13中app/about/layout.tsx的CSS Modules不生效问题求助

架构老林

2026-7-26

Next.js 13 CSS Modules布局样式不生效问题排查方案

针对你在Next.js 13.2.4中遇到的about目录layout组件CSS Modules样式不生效问题，按以下步骤排查：

1. 确认文件结构符合App Router规范

如果你的项目使用App Router，必须保证文件层级正确，示例结构如下：

app/
  about/
    layout.jsx
    page.jsx
    styles.module.css

确保layout文件名为小写layout.jsx（Next.js对文件名大小写严格匹配）
about目录下必须存在page.jsx作为该路由的入口页面，否则layout不会被渲染

2. 验证CSS Modules的绑定是否生效

在浏览器开发者工具中检查<main>元素的类名：

如果元素没有生成类似about_main_xxxx的哈希类名，说明CSS Modules导入失败：
- 检查styles.module.css是否与layout.jsx在同一目录
- 确认导入语句import styles from "./styles.module.css"没有拼写错误
如果有哈希类名但样式不生效，检查子页面（page.jsx）是否有优先级更高的样式覆盖了main的属性

3. 测试基础渲染逻辑

临时替换为内联样式验证layout是否正常渲染：

export default function AboutLayout({ children }) {
  return (
    <>
      <nav>About NavBar</nav>
      <main style={{ minHeight: '100vh', display: 'grid', placeContent: 'center', backgroundColor: '#333' }}>
        {children}
      </main>
    </>
  )
}

如果内联样式生效，说明问题出在CSS Modules的处理上；如果内联样式也不生效，说明layout没有被正确加载，检查路由配置是否正确。