スタイリングのヒント

ここでは役立つかもしれないスタイリングのヒントを紹介します。

以下のセクションは読み進めるだけで構いません。アプリを変更する必要はありません！

クラスの切り替えに clsx ライブラリを使用する

clsx はクラス名を簡単に切り替えられるシンプルなライブラリです。npm install clsx または yarn add clsx でインストールできます。

詳細はドキュメントを参照してください。基本的な使用法は次のとおりです:

• type を受け取る Alert コンポーネントを作成するとします。type は 'success' または 'error' のいずれかです。
• '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}',
    // 最高のパフォーマンスと誤検知を避けるため、
    // コンテンツ設定は可能な限り具体的にしてください。
  ],
};

PostCSS設定のカスタマイズについて詳しくは、PostCSSのドキュメントを参照してください。

Tailwind CSSを簡単に始めるには、サンプルコードをチェックしてください。

Sassの使用

Next.jsでは設定なしで.scssと.sass拡張子を使用してSassをインポートできます。CSSモジュールと.module.scssまたは.module.sass拡張子を使用してコンポーネントレベルのSassを利用できます。

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

npm install -D sass

このレッスンは以上です！

Next.jsの組み込みCSSサポートとCSSモジュールについて詳しくは、CSSドキュメントを参照してください。