App Router: CSS スタイリング

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

グローバルスタイル

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

global.css はアプリケーション内の任意のコンポーネントでインポートできますが、通常は最上位のコンポーネントに追加するのが良いプラクティスです。Next.js では、これはルートレイアウトになります（詳細は後述）。

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

/app/layout.tsx

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 ディレクティブがあることに気付くでしょう:

/app/ui/global.css

@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 クラスを使用していることがわかります。

/app/page.tsx

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
 
export default function Page() {
  return (
    // これらは Tailwind クラスです:
    <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> 要素の上に貼り付けます:

/app/page.tsx

<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 モジュールが優れた代替手段です。

CSS モジュール

CSS モジュールは、一意のクラス名を自動的に作成することで CSS をコンポーネントにスコープするため、スタイルの衝突を心配する必要もありません。

このコースでは引き続き Tailwind を使用しますが、CSS モジュールを使用して上記のクイズと同じ結果を得る方法を見てみましょう。

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

/app/ui/home.module.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 に置き換えます:

/app/page.tsx

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 モジュールは、Next.js アプリケーションをスタイリングする最も一般的な 2 つの方法です。どちらを使用するかは好みの問題であり、同じアプリケーションで両方を使用することもできます！

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

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

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

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

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

/app/ui/invoices/status.tsx

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 アプリケーションは次の方法でもスタイリングできます:

.css と .scss ファイルをインポートできる Sass
styled-jsx、styled-components、emotion などの CSS-in-JS ライブラリ

詳細については、CSS ドキュメントを参照してください。

CSS スタイリング

グローバルスタイル

Tailwind

CSS モジュール

clsx ライブラリを使用したクラス名の切り替え

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

On this page

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