【2章】Next.jsのチュートリアルをやってみた
これは Next.js の公式チュートリアルの2. CSS Stylingにやってみたメモです
前章のメモ
Next.js の公式チュートリアルの該当ページ
学ぶこと
- グローバルに 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>
);
}
http://localhost:3000 にアクセスして変更内容を確認します。
開発サーバを起動していない方は npm run devを実行して、起動してからアクセスしましょう
CSS ファイルを読み込む前と大きく見た目が変わりました！
これは、次で紹介するTailwind のおかげです。
/app/ui/global.cssを見てみると @tailwind と書かれた３行があります。
@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>
...
試しに自分でも追加してみましょう
/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`}>
...
ブラウザで確認すると、▲ のマークが新たに追加されました！
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 で 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`}>
...
先ほどと同じように黒い三角形が表示されています
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',
},
)}
>
最後に
今回の方法だけでなく、
- Sass
- styled-jsxなどの CSS-in-JS ライブラリ
など、CSS を適用する方法はいろいろあります。
詳しくはドキュメントをご覧ください
次章のメモ
Discussion