Next.jsのチュートリアルをやってみる【CSS編】

Next.jsを学ぶために、Next.js公式のチュートリアルをやっていきます。
前回までのチュートリアルはこちら。

2024年7月22日 Next.jsのチュートリアルをやってみる【準備編】

今回学ぶこと

グローバルCSSファイルをアプリケーションに追加する方法
CSSモジュールとTailwindのコーディング方法
clsxユーティリティパッケージを使用して条件付きでクラス名を追加する方法

グローバルCSSファイル

/app/uiフォルダの中のglobal.cssファイルを使用するとすべてのルートにCSSルールを追加することができます。主に「CSSのリセットルール」や「サイト全体のスタイル」に使用します。

global.cssはどのコンポーネントでもインポートできますが、通常はトップレベルのコンポーネントに追加するのが風習です。

global.cssにすでにCSSが記述されているので、/app/layout.tsxにglobal.cssをインポートして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>
  );
}

ファイルを保存したらページを更新し、以下の画像のようなデザインになればOKです。

global.cssの中を覗いてみるとCSSのルールは数個にもかかわらず、ページのデザインがかなり変わっています。それはglobal.dssの中に以下の@tailwindディレクティブが記述されているからです。

/app/ui/global.css

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

Tailwindの書き方

TailwindはCSSフレームワークの一種です。TSXマークアップに直接ユーティリティクラスを記述することで、効率的に開発を進めることができるフレームワークです。

例えば<h1 className="text-blue-500">I'm blue!</h1>の様に<h1>に"text-blue-500"というクラスを追加することで文字を青くすることが可能です。

Tailwindを使用することでこのようなメリットデメリットがあります。

メリット
- あらかじめクラスが用意されているのでコード量が減る
- レスポンシブ対応が簡単
- HTML上でスタイルの変更ができる
デメリット
- ビルドが必要になる
- 従来のCSS設計と思想が違うため違和感を感じる
- クラスにはコードを書かなければいけない
- 想像していたものの100%同じものを作成する際は手間がかかる

CSSのスタイルはグローバルで共有されますが、各クラスは各要素に個別で適用されるので、要素を追加・削除しても衝突しません。また、個別にCSSを分けなくてよくなるため、CSSバンドルの増大を気にしなくてよくなります。

/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">
    // ...
  )
}

試しに<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"
/>

この<div>タグはこのようなクラスが使用されています。

クラス	内容
relative	`position: relative;`と同様 (Position)
w-0 h-0	`width: 0px;`や`height: 0px;`が付与されるこの数値は`px`ではないことに注意（width, height）
border-l-[15px] border-r-[15px] border-b-[26px]	`border-width:`系のプロパティが付与される `l`, `r`, `b`は`left`, `right`, `bottom`を表す。（Border Width） `[]`は任意値を記述する方法となる。（Using arbitrary values）
border-l-transparent border-r-transparent	`border-color: transparent;`系のプロパティが付与される。 `l`, `r`は`left`, `right`を表す。（Border Color）
border-b-black	`border-bottom-color: rgb(0 0 0);`が付与される。 `b`は`bottom`を表す。（Border Color）

上記のクラスを確認したらどのような形が描画されるか予想してみてください。
予想したらページを更新して想像通りにできているか確認してみましょう。

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ファイル内で作成したhome.module.cssをインポートして、先ほど追加した<div>のTailwindクラス名をstyles.shapeに置き換えましょう。

ファイルを保存し、ページを更新したら同じ画面になっているはずです。

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

状態やその他の条件に基づいて、要素に条件付きでスタイルを設定するケースがあります。たとえばpendingまたはpaidのstatusを受け付けるInvoiceStatusコンポーネントを作成したいとします。paidの場合は緑、pendingの場合は灰色になる。

CLSXはクラス名を簡単に切り替えることができるライブラリで、こういったケースを解決することができます。

/app/ui/invoices/status.tsxの中に記述されているので確認してみましょう。

/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',
        },
      )}
    >
    // ...
)}