章2

CSSスタイリング

現在、あなたのホームページにはスタイルがありません。Next.jsアプリケーションをスタイリングする様々な方法を見ていきましょう。

この章では…

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

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

スタイリングの2つの異なる方法：TailwindとCSSモジュール。

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

グローバルスタイル

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

アプリケーション内の任意のコンポーネントで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は、ユーティリティクラスをTSXマークアップに直接記述することで開発プロセスを高速化するCSSフレームワークです。

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

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

CSSスタイルはグローバルに共有されますが、各クラスは各要素に個別に適用されます。つまり、要素を追加または削除しても、個別のスタイルシートのメンテナンス、スタイルの競合、アプリケーションのスケールに伴うCSSバンドルのサイズの増加を心配する必要はありません。

新しいプロジェクトを開始するためにcreate-next-appを使用すると、Next.jsはTailwindを使用するかどうかを尋ねます。「はい」を選択すると、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 (
    // 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>要素の上に貼り付けます。

/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コンポーネントを作成したいとします。statusは'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ライブラリを使用してクラス名を切り替える

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

チャプター完了2

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