nextjs typescript css modules反映されない
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が適用されていないのに気づかないというパターンもあると思います。
関連記事

> Build optimization failed: found page without a React Component as default export in pages/xxxxxxx のエラー
動作環境 nextjs 解決方法 pages/xxxxx.tsx のファイルの中 ...

const [ session ] = useSession()でエラーになるのを解決
タイトルが適当ではない気がしますが・・・。検索で引っかかればOK的な感じです。 ...

DistributionDir とは? (Zipping artifacts failed. This is often due to an invalid distribution directory path.のエラー)
検索で引っ掛からなかったので、書きました。amplify/.config/pro ...

cypress 使い方・入門
動作環境 amplifyでcypressを使うことを前提に書いてます。 簡単な手 ...

Binding element ‘name’ implicitly has an ‘any’ type. のエラー
動作環境 nextjs エラーの出ているコード (ファイル名:_app.tsx) ...