【02】Next.js app routerのチュートリアルやってみる(CSSスタイル)

はじめに

Next.js app routerのチュートリアルの第２章のアウトプットします。

前の記事

【01】Next.js app routerのチュートリアルやってみる

https://qiita.com/naoyuki2/items/af58da3d20cbc790e767

第２章 CSSスタイル

この章では下記を学習しました。

• グローバルＣＳＳをインポートする
• Tailwind
• CSSモジュール
• clsxでクラス名を柔軟に変更する

グローバルCSSのインポート

グローバルCSSファイルはアプリケーション全体で使用できる必要がある。

その場合はlayout.tsxでインポートする。

layout.tsxはapp routerにおけるルートレイアウトと呼ばれるファイルみたいです。

ここに書いたコードはすべてのページで共有されるため、headerやfooterといったものはおそらくここに書くのでしょう。

Tailwind

Next.jsはcreate-next-appで新しいプロジェクトを作成した場合にTailwindを使うか尋ねられます。

その時にYesを選択しておけば、すぐにTailwindが使える状態になっています。

CSSモジュール

一意のクラス名を自動的に作成することで CSS のスコープをコンポーネントに設定できるため、スタイルの衝突についても心配する必要がなくなります。

だそうです。

私は、Tailwindが結構好きですし、この後のコースもTailwindでスタイリングをするみたいなので適当に読み飛ばしました。

clsxでクラス名を柔軟に変更する

条件に基づいて要素のスタイルを設定するしたいという場合があります。

その時に使えるライブラリがclsxです。

例えば以下のコードでは、statusでredorblueを受け取ります。

そして、divのclassNameの中で条件式を書くことができます。

import clsx from 'clsx';

type Status = 'red' | 'blue';

type Props {
  status: Status;
}

export default function Test({ status }: Props) {
  return (
    <div
      className={clsx({
        'bg-red-100': status === 'red',
        'bg-blue-100': status === 'blue',
      })}
    >
      test
    </div>
  );
}

statusがredの場合

app/page.tsx

<Test status="red" />

statusがblueの場合

app/page.tsx

<Test status="blue" />

おわりに

まだまだ楽勝ですね！

次の記事