チャプター18

スタイリングのヒント

以下は役立つ可能性のあるスタイリングのヒントです。

以下のセクションを**読み進める**だけで大丈夫です。アプリに変更を加える必要はありません！

`clsx`ライブラリを使用してクラスを切り替える

clsxは、クラス名を簡単に切り替えることができるシンプルなライブラリです。npm install clsxまたはyarn add clsxを使用してインストールできます。

詳細については、そのドキュメントをご覧ください。基本的な使い方は以下のとおりです。

例えば、type（'success'または'error'）を受け付けるAlertコンポーネントを作成したいとします。
'success'の場合はテキストカラーを緑に、'error'の場合はテキストカラーを赤にしたいとします。

まず、次のようなCSSモジュール（例：alert.module.css）を作成します。

.success {
  color: green;
}
.error {
  color: red;
}

そして、次のようにclsxを使用します。

import styles from './alert.module.css';
import { clsx } from 'clsx';
 
export default function Alert({ children, type }) {
  return (
    <div
      className={clsx({
        [styles.success]: type === 'success',
        [styles.error]: type === 'error',
      })}
    >
      {children}
    </div>
  );
}

PostCSSの設定をカスタマイズする

Next.jsは、追加の設定なしで、デフォルトでPostCSSを使用してCSSをコンパイルします。

PostCSSの設定をカスタマイズするには、トップレベルにpostcss.config.jsという名前のファイルを作成します。これは、Tailwind CSSなどのライブラリを使用している場合に便利です。

Tailwind CSSを追加する手順は次のとおりです。まず、パッケージをインストールします。

npm install -D tailwindcss autoprefixer postcss

次に、postcss.config.jsを作成します。

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

tailwind.config.jsでcontentオプションを指定して、コンテンツソースを設定することも推奨します。

// tailwind.config.js
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    // For the best performance and to avoid false positives,
    // be as specific as possible with your content configuration.
  ],
};

カスタムPostCSS構成の詳細については、PostCSSのドキュメントをご覧ください。

Tailwind CSSを簡単に使い始めるには、私たちの例をご覧ください。

Sassの使用

Next.jsでは、デフォルトで.scssおよび.sass拡張子を使用してSassをインポートできます。コンポーネントレベルのSassは、CSS Modulesと.module.scssまたは.module.sass拡張子を使用して使用できます。

Next.jsの組み込みSassサポートを使用するには、まずsassをインストールしてください。

npm install -D sass

これでこのレッスンは終わりです！

Next.jsの組み込みCSSサポートとCSS Modulesの詳細については、CSSドキュメントをご覧ください。