Next.js + Tailwind CSS + Storybookの環境構築をしてStorybookを表示してみる
はじめに
Next.js + TailwindCSS + Storybookの構成で、環境構築を実施していきます。
Storybookを立ち上げて、TailwindCSSを適用するまでを記載しているので、これからStorybookを触ってみたいと思っている人の参考になれば嬉しいです。（TypeScriptを使用）
バージョン
環境構築時の各種バージョンは、こちらになります。
| バージョン | |
|---|---|
| yarn | 1.22.19 |
| node.js | 18.16.0 |
| Next.js | 13.4.19 |
| TailwindCSS | 3.3.3 |
| Storybook | 7.3.2 |
| TypeScript | 5.1.6 |
説明
Next.jsとは
Vercelが提供しているReactをベースにしているフレームワークです。
TailwindCSSとは
ユーティリティクラスを組み合わせたCSSのフレームワークです。
Storybookとは
UIのカタログ作成ツール。UIコンポーネントをブラウザで確認することができます。
Next.jsをセットアップ
まず、Next.jsの公式ドキュメントを参考に、Next.jsをセットアップしていきます。
インストール
npx create-next-app@latest
実行すると対話形式で設定項目が出てくるので、選択していきます。
特に変更がなければ、デフォルトの設定で問題ないかなと思います。（今回は、デフォルトで設定）
今回のプロジェクト名は、nextjs-tailwindcss-storybookにします。
What is your project named? nextjs-tailwindcss-storybook
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like to use `src/` directory? Yes
Would you like to use App Router? (recommended) Yes
Would you like to customize the default import alias? No
しばらくすると、プロジェクトが作成されるので、エディタで開きます。
初期のプロジェクトフォルダの構成は、このような構成になっています。
Next.jsを起動します。
yarn dev
起動したら、http://localhost:3000にアクセスします。
Next.jsの画面が表示されれば成功です！（なんかカッコイイ！！）
TailwindCSSをセットアップ
次に、TailwindCSSのセットアップをしていきます。
インストール
Next.jsの公式ドキュメントにTailwindCSSのセットアップ方法が記載されているので、そちらを参考に進めていきます。
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
実行すると先ほどNext.jsのインストールで作成したプロジェクト直下にtailwind.config.jsが作成されます。
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
Next.jsにTailwindCSSを適用
Next.jsで、TailwindCSSを使用できるようにセットアップしていきます。
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
+ "./app/**/*.{js,ts,jsx,tsx,mdx}",
+ "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+ "./components/**/*.{js,ts,jsx,tsx,mdx}",
+ "./src/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {},
},
plugins: [],
};
Next.jsで、TailwindCSSの設定が、反映されているか確認するために、設定していきます。Next.jsのセットアップで、作成されたsrc/app/page.tsxを使用して適用されているか確認していきます。（src/app/page.tsxへ記述されているコードは、一旦全て削除する）
const Page = () => {
return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>;
};
export default Page;
Next.jsをyarn devで起動して、http://localhost:3000にアクセスします。
画面を表示するとTailwindCSSが設定されていることが分かります。
page.tsxには、Next.jsに記載されているTailwindCSSの設定をしました。
設定したTailwindCSSの内容は、この辺りです。
ちなみに、TailwindCSSの公式ドキュメントにもNext.jsでのセットアップ方法が記載されているので、こちらを参考にしても大丈夫です。
補足
TailwindCSSの設定は、src/app/globals.cssで設定されており、src/app/layout.tsxで読み込まれている。
@tailwind base;
@tailwind components;
@tailwind utilities;
import './globals.css'
Storybookのセットアップ
次にStorybookのセットアップをしていきます。
インストール
こちらは、Storybookの公式ドキュメントを参考にセットアップしていきます。
npx storybook@latest init
インストールが完了すると自動で起動します。
自動で起動しない場合は、下記のコマンドを実行する。
yarn storybook
起動したら、http://localhost:6006にアクセスします。
Storybookの画面が表示されれば成功です！
Storybookがインストールされた後のフォルダ構成です。
.storybook、src/storiesが追加されています。
src/storiesには、Storybookがインストールされた際のサンプルが含まれています。
この時点では、StorybookにTailwindCSSは適用されていない状態になります。
StorybookにTailwindCSSを適用
Storybookで、TailwindCSSを使えるようにセットアップしていきます。
こちらもセットアップ方法が提供されているので、こちらを参考に進めていきます。
.storybook/preview.tsにglobals.cssをimportする。
import type { Preview } from "@storybook/react";
+ import "../src/app/globals.css";
const preview: Preview = {
parameters: {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
},
};
export default preview;
StorybookにTailwindが反映されていることを確認するためにsrc/stories/Button.tsxを編集する。（こちらを参考）
import React, { useMemo } from "react";
import "./button.css";
interface ButtonProps {
/**
* Is this the principal call to action on the page?
*/
primary?: boolean;
/**
* What background color to use
*/
backgroundColor?: string;
/**
* How large should the button be?
*/
size?: "small" | "medium" | "large";
/**
* Button contents
*/
label: string;
/**
* Optional click handler
*/
onClick?: () => void;
}
const getSizeClasses = (size?: "small" | "medium" | "large") => {
switch (size) {
case "small": {
return "px-4 py-2.5";
}
case "large": {
return "px-6 py-3";
}
default: {
return "px-5 py-2.5";
}
}
};
const getModeClasses = (isPrimary: boolean) =>
isPrimary
? "text-white bg-pink-600 border-pink-600 dark:bg-pink-700 dark:border-pink-700"
: "text-slate-700 bg-transparent border-slate-700 dark:text-white dark:border-white";
const BASE_BUTTON_CLASSES =
"cursor-pointer rounded-full border-2 font-bold leading-none inline-block";
/**
* Primary UI component for user interaction
*/
export const Button = ({
primary = false,
backgroundColor,
size = "medium",
label,
...props
}: ButtonProps) => {
const computedClasses = useMemo(() => {
const modeClass = getModeClasses(primary);
const sizeClass = getSizeClasses(size);
return [modeClass, sizeClass].join(" ");
}, [primary, size]);
return (
<button
type="button"
className={`${BASE_BUTTON_CLASSES} ${computedClasses}`}
style={{ backgroundColor }}
{...props}
>
{label}
</button>
);
};
表示されているボタンの色が変わっていることが確認できたら成功です！
先ほどのURLを参考にStorybookにTailwindCSSを適用すると、primaryをTrueからFalseに設定するとボタンが見えない状態になるので、下記の設定も追加する。
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/**/*.{js,ts,jsx,tsx,mdx}",
],
+ darkMode: ["class", '[data-mode="dark"]'],
theme: {
extend: {},
},
plugins: [],
};
設定を追加することでちゃんと表示されました。
StorybookのコンポーネントをNext.jsで表示
最後にStorybookのコンポーネントをNext.jsで、表示してみます。
import { Button } from "@/stories/Button";
const Page = () => {
return (
<div>
<h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
<Button label="Button" primary />
</div>
);
};
export default Page;
画面にButtonコンポーネントが表示されました！
おわりに
Next.js + TailwindCSS + Storybookの構成で環境構築をして、Storybookを表示する手順でした。
それぞれの公式ドキュメントに、色々とやり方が書かれていたので、あまり悩むことなく環境構築できました！
Storybookは、Figmaでデザインしたものを画面で表示する際のUIデザインの確認やコンポーネント設計などに使えると思います。次はStorybookの使い方をもう少し深掘りたいですね。
最後まで読んでいただいてありがとうございます！！
もし、間違えている箇所などあれば、コメントいただけると嬉しいです！
Discussion