Next.js绑定CSS类名报image未定义运行时错误解决方法

Next.js项目中给div元素绑定CSS类时触发服务端运行时错误，错误信息：

Server Error ReferenceError: image is not defined
触发报错的问题代码：

<div className={`${style.about__me-image}`}>

这是JavaScript对象属性访问的语法错误，和Next.js框架本身无关：
你使用的是CSS Modules的对象取值写法，当CSS类名包含连字符-时，点访问语法style.about__me-image会被JS引擎解析为「取style.about__me属性的值 减去 名为image的变量」，由于代码中从未定义过image变量，就会抛出image is not defined的引用错误。

根据你使用的CSS引入方式选对应写法即可：

• 如果是CSS Modules模式（即通过import style from 'xxx.module.css'导入样式）：
  带连字符的类名必须用方括号语法访问属性，单类名不需要套模板字符串，直接赋值即可：

  <div className={style['about__me-image']}>
  

  如果需要同时绑定多个类名，模板字符串写法如下：

  <div className={`${style['about__me-image']} ${style.otherClassName}`}>
  

  小提示：如果把CSS类名改成驼峰命名（比如aboutMeImage），符合JS标识符命名规则，就可以直接用点语法访问：style.aboutMeImage
• 如果是全局CSS模式（非.module.css后缀的全局样式），不需要通过style对象取值，直接传类名字符串即可：

  <div className="about__me-image">
  

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