スタイリングのヒント

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

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

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 をインポートできます。CSS Modules と .module.scss または .module.sass 拡張子を使って、コンポーネントレベルの Sass を使用できます。

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

npm install -D sass

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

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