【完全保存版】Next.js + TypeScript で .module.css の型エラー（波線）を消す方法

Next.js + TypeScript を使っていると、CSS Modules をインポートしたときにこんなエラーが出ることがあります：

プロパティ 'inputGroup' は型 'typeof import("*.module.css")' に存在しません。

これは TypeScript が .module.css の型を理解できていないために起こる問題です。本記事では、補完も効く＆波線も消える完全な解決方法を解説します。

✅ 結論：型定義ファイルを自作し、tsconfig を正しく設定する

🧱 1. 型定義ファイルを作成する

プロジェクトルート、または types/ ディレクトリを作成し、以下のファイルを追加します。

📄 types/cssModule.d.ts

// types/cssModule.d.ts declare module '*.module.css' {
  const classes: Record<string, string>;
  export default classes;
}

⚙️ 2. tsconfig.json を設定する

tsconfig.json に型ファイルを認識させるための設定を追加します。

✅ 必須の変更点

{
  "compilerOptions": {
    "typeRoots": ["./types", "./node_modules/@types"], // 型定義のルートに types/ を追加
    "baseUrl": ".", // 必要ならすでに設定済みでOK
    // その他の設定は省略
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    "types" // 型定義ファイルを含める
  ]
}

📥 3. import は default import を使う

// ✅ 正しい書き方 
import styles from './DateInput.module.css';

<div className={styles.inputGroup}></div>

// ❌ ダメな書き方（波線エラーの原因） 
import * as styles from './DateInput.module.css';

<div className={styles.inputGroup}></div> // エラーになる 

🔁 4. VSCode を再起動 or TS Server を再起動

型定義の変更が即時反映されないことがあります。以下のどちらかを実行してください。

VSCode を完全に再起動

または Ctrl + Shift + P → TypeScript: Restart TS Server

✅ 結果：補完＆波線なしの快適開発！

import styles from './DateInput.module.css';

styles.inputGroup; // ⌨️ 補完が効く！波線も出ない！ 

❓補足：型定義生成ツールを使う方法もある

より厳密な型を使いたい場合は typed-css-modules を使って .d.ts を自動生成する方法もあります。

npm install --save-dev typed-css-modules
npx tcm '**/*.module.css' --watch

📝 まとめ

これで、.module.css を使っていても 型エラーや波線に悩まされることはありません！