drawer.css.map被作为id传入Page组件及generateMetadata问题求助

核心问题原因 #

这是Chrome DevTools加载CSS Source Map时的路径错误触发了Next.js动态路由匹配导致的：

• 你的drawer.css文件中，Source Map的引用路径被错误解析为/users/drawer.css.map（而非正确的静态资源路径，比如/_next/static/css/xxx/drawer.css.map）
• 当DevTools发起这个错误请求时，Next.js的users/[id]动态路由会把drawer.css.map当成id参数，传入你的Page组件和generateMetadata函数
• 服务器收到请求后返回的是页面HTML而非Source Map的JSON，因此DevTools抛出解析错误警告

解决方案 #

1. 临时禁用Source Map（快速止症）

在next.config.js中添加配置，关闭开发环境的Source Map生成，避免DevTools发起错误请求：

module.exports = {
  devtool: 'none', // 禁用开发环境Source Map
  productionBrowserSourceMaps: false, // 生产环境按需开启
}

2. 修复CSS Source Map路径

• 检查drawer.css文件末尾的sourceMappingURL注释，确保路径正确。如果是Next.js自动处理的CSS（CSS Modules或全局CSS），无需手动修改，可尝试：
  • 确认CSS导入方式：动态路由页面只能用CSS Modules（如import styles from './drawer.module.css'），全局CSS必须在app/layout.tsx中引入
  • 清理Next.js缓存：删除.next文件夹和node_modules/.cache后重启开发服务

3. 升级Next.js版本

部分旧版Next.js（如v13早期版本）存在CSS Source Map路径解析bug，升级到最新稳定版（v13.4+或v14.x）可解决这类问题

4. 过滤无效路由参数

如果上述方法无效，可在动态路由页面中添加参数校验，过滤非预期的id值：

import { notFound } from 'next/navigation'

export default async function Page({ params: { id } }) {
  // 过滤掉类似drawer.css.map的无效id
  if (id.endsWith('.css.map')) {
    return notFound()
  }
  // 正常业务逻辑
}

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