スタイリングのヒント

最初のアプリを作成する

検索エンジン最適化

0 ポイント

アセット、メタデータ、CSS

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

以下のセクションを読んでください。アプリに変更を加える必要はありません！

`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.
  ],
};