Note: 和訳しながらNext.js学習しました

現在ホームページはスタイルを保有していません。Next.jsアプリを装飾する別の方法を見てみましょう。

この章では...

ここで取り上げるトピック

全体のスタイル

/app/uiフォルダ内を見ている場合、global.cssがあることを確認できます。このファイルはアプリ全体にCSSを適用する為に使用できます。 - CSSリセットルール・リンクなどの様なサイト全体の装飾など。

global.cssはアプリのどのコンポーネント内でもインポートできます。しかし一般的にいい方法は上位レイヤーのコンポーネントに追加する方法です。Next.jsではroot layoutになります。

globalスタイルを追加する為に/app/layot.tsxへ移動してglobal.cssファイルをインポートしています。

開発サーバーが起動している際に、変更を保存するとブラウザに反映されます。現在ホームページはこのように表示されているはずです：

image

CSSルールを追加してないのに何処からスタイルは来たのでしょう？

global.css 内部を見ると、いくつかの@tailwindの指示に気がつくでしょう：


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

Tailwind

TailwindはCSSフレームワークです。TSXマークアップ内に直接utility classesを記入でることで開発工程をスピードアップします。

Tailwindでは、クラス名を追加することでエレメントを装飾します。たとえば"text-blue-500"を<h1>に追加するとテキストは青になります：

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

CSSスタイルは全てに共有されますが、各クラスは各エレメントに個別で割り当てられます。これはエレメントを追加・削除する際、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に貼り付けます。


<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は 自動的にユニークなclass名を作成することで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アプリの最も一般的な２つです。どちらを使うかは好みの問題です。同じアプリケーションで両方使うことも出来る。

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

場合によっては条件付きの装飾が必要な要素があるかもしれません。

clsxは簡単にクラス名を切り替えられるライブラリーです。詳細はdocumentationを確認することをお勧めします。基本的な使用方法：