チャプター2

CSSスタイリング

現在、ホームページにはスタイルが適用されていません。Next.js アプリケーションにスタイルを適用するさまざまな方法を見てみましょう。

このチャプターでは...

取り上げるトピックは以下の通りです。

アプリケーションにグローバル CSS ファイルを追加する方法。

2つの異なるスタイリング方法：Tailwind と CSS Modules。

clsx ユーティリティパッケージを使用してクラス名を条件付きで追加する方法。

グローバルスタイル

/app/ui フォルダの中を見ると、global.css というファイルがあります。このファイルを使用して、CSS リセットルール、リンクなどの HTML 要素のサイト全体スタイルなど、アプリケーションのすべてのルートに CSS ルールを追加できます。

アプリケーションのどのコンポーネントからでも global.css をインポートできますが、通常は最上位のコンポーネントに追加するのが良い習慣です。Next.js では、これはルートレイアウトです（これについては後ほど詳しく説明します）。

/app/layout.tsx に移動し、global.css ファイルをインポートして、アプリケーションにグローバルスタイルを追加します。

import '@/app/ui/global.css';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

開発サーバーがまだ実行されている状態で、変更を保存し、ブラウザでプレビューします。ホームページは次のようになります。

しかし、ちょっと待ってください。CSS ルールを追加していませんが、スタイルはどこから来たのでしょうか？

global.css の中を見ると、いくつかの @tailwind ディレクティブがあることに気付くでしょう。

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind

Tailwind は、React コードで直接ユーティリティクラスをすばやく記述できるようにすることで、開発プロセスを高速化する CSS フレームワークです。ユーティリティクラス。

Tailwind では、クラス名を付加することで要素にスタイルを適用します。たとえば、"text-blue-500" を追加すると、<h1> のテキストが青色になります。

<h1 className="text-blue-500">I'm blue!</h1>

CSS スタイルはグローバルに共有されますが、各クラスは各要素に個別に適用されます。これは、要素を追加または削除しても、個別のスタイルシートの保守、スタイルの競合、またはアプリケーションのスケールアップに伴って CSS バンドルのサイズが増加することを心配する必要がないことを意味します。

create-next-app を使用して新しいプロジェクトを開始すると、Next.js は Tailwind を使用するかどうかを尋ねます。yes を選択すると、Next.js は必要なパッケージを自動的にインストールし、アプリケーションで Tailwind を設定します。

/app/page.tsx を見ると、例で Tailwind クラスを使用していることがわかります。

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
 
export default function Page() {
  return (
    // These are Tailwind classes:
    <main className="flex min-h-screen flex-col p-6">
      <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
    // ...
  )
}

Tailwind を初めて使用する場合でも心配しないでください。時間を節約するために、使用するすべてのコンポーネントにすでにスタイルを適用しています。

Tailwind で遊んでみましょう！次のコードをコピーして、/app/page.tsx の <p> 要素の上に貼り付けます。

<div
  className="relative w-0 h-0 border-l-[15px] border-r-[15px] border-b-[26px] border-l-transparent border-r-transparent border-b-black"
/>

従来の CSS ルールを記述したり、JSX からスタイルを分離したりすることを好む場合でも、CSS Modules は優れた代替手段です。

CSS Modules

CSS Modules を使用すると、一意のクラス名を自動的に作成することで CSS をコンポーネントにスコープできるため、スタイルの競合について心配する必要がありません。

このコースでは引き続き Tailwind を使用しますが、クイズの結果を CSS Modules を使用してどのように達成できるかを理解するために、少し時間をかけましょう。

/app/ui の中に、home.module.css という新しいファイルを作成し、次の CSS ルールを追加します。

.shape {
  height: 0;
  width: 0;
  border-bottom: 30px solid black;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

次に、/app/page.tsx ファイル内でスタイルをインポートし、追加した <div> の Tailwind クラス名を styles.shape に置き換えます。

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
import styles from '@/app/ui/home.module.css';
 
export default function Page() {
  return (
    <main className="flex min-h-screen flex-col p-6">
      <div className={styles.shape} />
    // ...
  )
}

変更を保存し、ブラウザでプレビューします。以前と同じ形状が表示されるはずです。

Tailwind と CSS Modules は、Next.js アプリケーションをスタイリングするための最も一般的な 2 つの方法です。どちらを使用するかは個人の好みに依存しますが、同じアプリケーションで両方を使用することもできます。

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

状態やその他の条件に基づいて要素を条件付きでスタイル設定する必要がある場合があります。

clsx は、クラス名を簡単に切り替えることができるライブラリです。ドキュメントを参照することをお勧めしますが、基本的な使用法は次のとおりです。

status を受け取る InvoiceStatus コンポーネントを作成したいとします。ステータスは 'pending' または 'paid' のいずれかです。
'paid' の場合は緑色、'pending' の場合は灰色にしたいとします。

clsx を使用してクラスを条件付きで適用できます。次のようになります。

import clsx from 'clsx';
 
export default function InvoiceStatus({ status }: { status: string }) {
  return (
    <span
      className={clsx(
        'inline-flex items-center rounded-full px-2 py-1 text-sm',
        {
          'bg-gray-100 text-gray-500': status === 'pending',
          'bg-green-500 text-white': status === 'paid',
        },
      )}
    >
    // ...
)}

その他のスタイリングソリューション

これまで説明したアプローチに加えて、Next.js アプリケーションを次のようにスタイリングすることもできます。

Sass。これにより、.css および .scss ファイルをインポートできます。
styled-jsx、styled-components、emotionなどの CSS-in-JS ライブラリ。

CSS ドキュメントで詳細を確認してください。