爆速でNext.js×vanilla-extract×Storybookのリポジトリ作成！
はじめに
下記の内容が入ったリポジトリを作ってみましょう！
- Next.js
- vanilla-extract
- Storybook
versionは、Next.js v14.2.3、vanilla-extract @1.15.2、Storybook 8.1.5です！
Next.jsのリポジトリ作成
ターミナルで、リポジトリを置きたい階層まで行き、下記コマンドを実行。
npx create-next-app@latest
今回のアプリ名はnext-sampleにしました。ご自分の好きな名前をつけてください！
その後Enter key連打！
Next.jsのリポジトリ作成完了❤️🔥
Storybook導入
ターミナルでnext-sampleに移動して、Storybookを入れます。下記コマンドを実行。
cd next-sample/
npx sb init
しばらくするとブラウザにリダイレクトして、こちらの画面になります。
Storybook導入の完了❤️🔥
Storybookをコンポーネントごとに表示
ターミナルで下記コマンド実行。VSCodeを開きます。
code .
VSCodeを開いたら、コンポーネントごとにStorybookを表示したいので、書き換えます。
このような構成にしていきます。
components
└── Button
├── index.stories.tsx
└── index.tsx
src/components/Button/index.tsxを作り、その中にButtonコンポーネントのコードを書きます。
こちらは何のコンポーネントでも大丈夫です！今回はButtonにしました。
index.tsx
"use client";
import React from "react";
type Props = {
label?: string;
children?: React.ReactNode;
};
export const Button = ({ children }: Props) => {
return <button>{children}</button>;
};
そして、src/components/Button/index.stories.tsxを作り、その中にStorybookに表示させるコードを書きます。
index.stories.tsx
import { Button } from ".";
export const Story = () => (
<div style={{ marginBottom: 80 }}>
<Button>ボタン</Button>
</div>
);
export default {
title: "src/Button",
component: Button,
tags: ["autodocs"],
};
その後、Storybookを起動し、確認します。ターミナルでこちらのコマンドを打ってください。
npm run storybook
すると、こちらの画面が表示されると思います！
Storybookにコンポーネントごとに表示完了🎉
vanilla-extract導入
ターミナルで下記のコマンドを実行しvanilla-extractとvanilla-extractのプラグインと
vanillaのrecipesとかを使う場合はそちらも入れます。
npm install @vanilla-extract/css
npm install -D @vanilla-extract/next-plugin
npm install @vanilla-extract/recipes --save-dev
next.config.mjsの中身を下記に上書き
import { createVanillaExtractPlugin } from '@vanilla-extract/next-plugin';
const withVanillaExtract = createVanillaExtractPlugin();
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
appDir: true,
},
};
export default withVanillaExtract(nextConfig);
vanilla-extractがブラウザに反映されるか確認
src/app/page.tsxに下記の内容を上書きします。
import * as styles from "./styles.css";
export default function Home() {
return (
<main className={styles.container}>
<div className={styles.container}>Hello World🙌</div>
</main>
);
}
src/app/styles.css.tsを作って、下記の内容を書きます。
import { style } from "@vanilla-extract/css";
export const container = style({
padding: 20,
backgroundColor: "pink",
fontSize: 50,
color: "#fff",
});
ターミナルで、下記コマンド実行
npm run dev
Open Clickをクリック
こちらの画面がブラウザに表示されていたら成功です！
vanilla-extractの導入完了🎉
参考
vanilla-extractをStorybookに反映させる
Stroybookは、webpackを利用しているので、webpack-pluginを利用します。また各設定内容マージするためにwebpack-mergeも利用したいと思います。
ターミナルで下記のコマンドを実行。
npm install --save-dev @vanilla-extract/webpack-plugin webpack-merge
.storybook/main.tsに下記の内容を上書き
const { VanillaExtractPlugin } = require("@vanilla-extract/webpack-plugin");
const { merge } = require("webpack-merge");
module.exports = {
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
"@storybook/preset-create-react-app",
"@chromatic-com/storybook"
],
framework: {
name: "@storybook/nextjs",
options: {}
},
webpackFinal: async (config) =>
merge(config, {
plugins: [new VanillaExtractPlugin()],
}),
docs: {},
typescript: {
reactDocgen: "react-docgen-typescript"
}
};
先ほど作成した、Buttonコンポーネント配下にstyles.css.tsファイルを作成
components
└── Button
├── index.stories.tsx
├── index.tsx
└── styles.css.ts//ここに追加
src/components/Button/styles.css.tsに下記の内容を追加
import { style } from "@vanilla-extract/css";
export const button = style({
backgroundColor: "#0070f3",
color: "white",
border: "none",
padding: "10px 20px",
fontSize: "16px",
borderRadius: "4px",
cursor: "pointer",
transition: "background-color 0.3s",
":hover": {
backgroundColor: "#005bb5",
},
});
src/components/Button/index.tsxに下記の内容を上書き
"use client";
import React from "react";
import * as styles from './styles.css';
type Props = {
label?: string;
children?: React.ReactNode;
};
export const Button = ({ children }: Props) => {
return <button className={styles.button}>{children}</button>;
};
ターミナルで下記のコマンド実行
npm run storybook
こちらの画面が表示され、vanilla-extractがボタンのデザインに反映されていたら成功です！
vanilla-extractをStorybookに反映完了🎉
おめでとうございます！これで開発ができます🙌
tree
src配下はこんな感じになっています！
.
├── app
│ ├── favicon.ico
│ ├── globals.css
│ ├── layout.tsx
│ ├── page.module.css
│ ├── page.tsx
│ └── styles.css.ts
└── components
└── Button
├── index.stories.tsx
├── index.tsx
└── styles.css.ts
まとめ
Next.js×vanilla-extract×Storybookでリポジトリを作ってみました！
エラーと戦って、作ったり、壊したりを繰り返してできるようになりました！
皆さんもぜひやってみてください！
また、コマンドやコードが違っていたら教えてください！よろしくお願いします！
詳しい内容は、また別の記事で書いていこうと思います❤️🔥
Discussion