nextjs typescript css modules反映されない

7月 3, 2022nestjs

トラブルの症状

nextjsで自分が作成したmodulesタイプのcssが反映されない。

動作環境

2022年7月 macOS M1 ローカルPC開発作業

$ npm info next version
12.2.0

$ npm list
├── (省略)
├── @types/node@18.0.0
├── @types/react-dom@18.0.5
├── @types/react@18.0.14
├── next@12.2.0
├── react-dom@18.2.0
├── react@18.2.0
└── typescript@4.7.4

原因

tsxファイルのタグのidまたはclassNameの指定のところで、""で囲んでいたのがいけなかった。(初心者あるある・・・といいつつベテランでもハマっているはず)

具体的なコード

pages/hello.tsx を以下のように作成します。

import { NextPage } from "next";
import Home from '../styles/Home.module.css';

const Index: NextPage = props => {
  return (
    <div>
      <h1>Hello world!</h1>

      ↓これが正解
      <p className={Home.aaa}>あああ</p>
      ↓これだと反映されない
      <p className="{Home.aaa}">いいい</p>
    </div>

  );
}
// default exportしないといけない
export default Index;

ちなみに、上記コードであああの文字がが赤くなるようにstyles/Home.modules.css に以下を追加しています。

.aaa {
  color: red;
}

以下のコマンドを実行して、ブラウザから http://localhost:3000/helloにアクセスしてcssが反映されていることを確認して下さい。

npm run build
npm run start

感想

className属性を"”で囲んでしまっていてもnpm run buildが通ってしまうのでcssが適用されていないのに気づかないというパターンもあると思います。