【2章】Next.jsのチュートリアルをやってみた

これはNext.jsの公式チュートリアルの2. CSS Styling に関するメモです

前章のメモ

【1章】Next.jsのチュートリアルをやってみた

これはNext.jsの公式チュートリアルの1. Getting Started に関するメモです前章のメモ Next.jsの公式チュートリアルの該当ページ Next.j...

Next.jsの公式チュートリアルの該当ページ
学ぶこと
グローバルなスタイル
Tailwind
CSS モジュール
clsxライブラリを使用したクラス名の切り替え
最後に

Next.jsの公式チュートリアルの該当ページ

Learn Next.js: CSS Styling | Next.js

Style your Next.js application with Tailwind and CSS modules.

学ぶこと

グローバルにCSSファイルをアプリに適用する方法
Tailwind CSS と ローカルにCSSファイルの使用方法
clsxを使用したクラス名の条件付き適用

グローバルなスタイル

グローバル＝アプリケーション全体に適用させる

本チュートリアルでは、app/ui/global.css をグローバルなCSSとして設定します。

設定方法は、アプリケーションの最上位コンポーネントでこのCSSを読み込みます。

Next.js（App Router）では、/app/layout.tsx が最上位コンポーネントになります

なので、/app/layout.tsx で app/ui/global.cssを読み込みます

1行目のimport文（ハイライト部）を追加してください

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

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

export default function RootLayout({

children,

}: {

children: React.ReactNode;

}) {

return (

<body>{children}</body>

</html>

);

}

http://localhost:3000 にアクセスして変更内容を確認します。

開発サーバを起動していない方は
npm run dev
を実行して、起動してからアクセスしましょう

CSSファイルを読み込む前と大きく見た目が変わりました！

これは、次で紹介するTailwindのおかげです。

/app/ui/global.css を見てみると @tailwindと書かれた３行があります。

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

@tailwind base;

@tailwind components;

@tailwind utilities;

@tailwind base	Tailwindのベーススタイルを読み込む。これによりブラウザのデフォルトスタイルをリセットしてくれる
@tailwind components	Containerクラスを読みこむ
@tailwind utilities	Utilityクラスを読み込む。いろいろなクラスがあるらしいが、具体的にはよくわからない

参考：Tailwind CSSとは #tailwindディレクティブとは

Tailwind

TailwindとはCSSのフレームワークのこと。

HTML要素にクラス名を追加することでスタイルを適用できます。

ちなみにNext.jsのアプリを0から作る場合にはTailwindを使うか聞かれます。
yesを選択するとアプリ作成時に自動でTailwindを使えるようにしてくれます。

/app/page.tsx を見てみると、要素に様々なクラス名が付与されていると思います。

,..

export default function Page() {
  return (
    // classNameに適用したいスタイルに該当するクラス名を追加していく
    <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">
        {/* <AcmeLogo /> */}
      </div>

...

,..

export default function Page() {

return (

// classNameに適用したいスタイルに該当するクラス名を追加していく

{/* <AcmeLogo /> */}

</div>

...

試しに自分でも追加してみましょう

/app/page.tsx に１行追加してみます

...

export default function Page() {
  return (
    <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">
        {/* <AcmeLogo /> */}
      </div>
      <div className="mt-4 flex grow flex-col gap-4 md:flex-row">
        <div className="flex flex-col justify-center gap-6 rounded-lg bg-gray-50 px-6 py-10 md:w-2/5 md:px-20">
          <div className="h-0 w-0 border-b-[30px] border-l-[20px] border-r-[20px] border-b-black border-l-transparent border-r-transparent" />
          <p className={`text-xl text-gray-800 md:text-3xl md:leading-normal`}>

...

...

export default function Page() {

return (

{/* <AcmeLogo /> */}

</div>

...

ブラウザで確認すると、▲のマークが新たに追加されました！

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;
}

.shape {

height: 0;

width: 0;

border-bottom: 30px solid black;

border-left: 20px solid transparent;

border-right: 20px solid transparent;

}

/app/page.tsx でstylesという名前でインポートし、Tailwindで追加したdivタグのclassNameを変更します。

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="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
        {/* <AcmeLogo /> */}
      </div>
      <div className="mt-4 flex grow flex-col gap-4 md:flex-row">
        <div className="flex flex-col justify-center gap-6 rounded-lg bg-gray-50 px-6 py-10 md:w-2/5 md:px-20">
          <div className={styles.shape} />
          <p className={`text-xl text-gray-800 md:text-3xl md:leading-normal`}>

...

import styles from '@/app/ui/home.module.css';

...

export default function Page() {

return (

{/* <AcmeLogo /> */}

</div>

...

先ほどと同じように黒い三角形が表示されています

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

状態やその他の条件によってスタイルを切り替えられるのがclsxライブラリ。

ドキュメントはこちら。

↓のコードのようにstatusの値によって適用するクラスを変えられます。

import { CheckIcon, ClockIcon } from '@heroicons/react/24/outline';
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-xs',
        {
          'bg-gray-100 text-gray-500': status === 'pending',
          'bg-green-500 text-white': status === 'paid',
        },
      )}
    >