Zenn
🎨

Next.js Learn Courseをやってみる Chapter2

2023/10/28に公開
CSS
Next.js
React
TypeScript
tech

CSS Styling

ここでは、様々なCSSの設定方法を教えてくれます。

  • globalなCSSファイル
  • Tailwind, CSS modules
  • clsxユーティリティパッケージを使って条件付きでクラス名を追加する

Global

app/ui/global.cssを使うと、アプリケーションのすべてのルートにCSSのツールを追加できる。

アプリケーションのどのコンポーネントでもglobal.cssをインポートできるが、NextjsではRoot Layoutに追加するのが良い。

/app/layout.tsxに以下を追加。

import '@/app/ui/global.css';

と一気にページがオシャレに！だけどファイルを見てみると全くCSSが書かれていません。

But wait a second, you didn’t add any CSS rules, where did the styles come from?

チュートリアルでもこのように書かれていて、読者のツッコミ待ちのような楽しい書き方をしています（好き）

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

ファイルを見てみるとtailwindの記述があり、Tailwindの説明に入ります。

Tailwind

結局上のスタイリングはTailwindが全部やってくれてました。

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

と書くと青いテキストが表示されます。クラス名からスタイリングが分かりやすいですよね。/app/page.tsxに書かれた実際のTailwind:

<main className="flex min-h-screen flex-col p-6">

CSS Modules

.shape {
  height: 0;
  width: 0;
  border-bottom: 30px solid black;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

home.module.cssというファイルを作成し、クラス名を一意に設定すれば、

import styles from './home.module.css';
 
//...
<div className={styles.shape}></div>;

このように読み込んでCSSをコンポーネントに適用させることができます。コンポーネントとスタイリングを分けたい人はこちらで。

NextjsではTailwindとCSSモジュールが最も一般的なスタイリング方法のようです。好みの問題で、同じアプリケーションで両方とも使えます。

clsx

この条件の時は背景を青に、などの条件分けの時に便利なライブラリ。

<span
      className={clsx(
        'inline-flex items-center rounded-full px-2 py-1 text-xs',
        {
          'bg-gray-100 text-gray-500': status === 'pending',
          'bg-green-500 text-white': status === 'paid',
        },
      )}
    >

条件分岐させたい部分と条件分岐させずにすべて適用したいケースの両方に対応できる。

他のスタイリングとして、Sass, CSS in JSライブラリはstyled-jsx, styled-componenst, emotionが使えます。

補足

リンクされたCSSドキュメントを見ると、クライアントコンポーネントだと、以下がサポート中。

kuma-ui
@mui/material
pandacss
styled-jsx
styled-components
style9
tamagui
tss-react
vanilla-extract

If you want to style Server Components, we recommend using [CSS Modules](https://nextjs.org/docs/app/building-your-application/styling/css-modules) or other solutions that output CSS files, like PostCSS or [Tailwind CSS](https://nextjs.org/docs/app/building-your-application/styling/tailwind-css).

サーバーコンポーネントだと、CSS Modules, PostCSS, TailwindCSSをお勧めしていました。

Discussion