Next.jsプロジェクトにCSSを適用する手順

Next.jsとTypeScriptを使用したCSSの適用

Next.jsでは、CSSモジュールという機能を使用してスタイルを適用することができます。これはCSSファイルを直接JavaScriptまたはTypeScriptファイルにインポートし、スタイルをコンポーネントに適用するためのオブジェクトを提供します。

CSSファイルの作成

まず、CSSファイルを作成します。CSSモジュールの場合、ファイル名は.module.cssで終わる必要があります。以下は、styles.module.cssというファイルに対する例です。

.container {
  margin: 0 auto;
  width: 50%;
  padding: 20px;
  text-align: center;
}

TypeScriptコンポーネントでのCSSの使用

次に、TypeScriptコンポーネントで先程のCSSをインポートして使用します。以下は、ExampleComponent.tsxというコンポーネントに対する例です

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

const ExampleComponent = () => {
  return (
    <div className={styles.container}>
      <p>Hello, world!</p>
    </div>
  )
}

export default ExampleComponent

ここでは、まずstyles.module.cssファイルをインポートし、それをstylesという名前のオブジェクトとして使用しています。そして、そのオブジェクトのプロパティ（この例ではcontainer）をclassNameプロパティの値として指定しています。このようにすることで、対応するCSSスタイルがコンポーネントに適用されます。

注意点

CSSモジュールはスコープがローカルになっています。つまり、styles.module.cssで定義したスタイルは、そのファイルをインポートしたコンポーネントにのみ適用され、他のコンポーネントには影響を及ぼさないようになっています。これにより、コンポーネントごとにスタイルが独立し、意図しないスタイルの競合を防ぐことができます。
以上が、Next.jsとTypeScriptを使用してclassName={}でCSSを適用する方法になります。