🍋

爆速でNext.js×vanilla-extract×Storybookのリポジトリ作成！

2024/06/05に公開

Next.js

Storybook

vanilla-extract

tech

はじめに

下記の内容が入ったリポジトリを作ってみましょう！

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でリポジトリを作ってみました！
エラーと戦って、作ったり、壊したりを繰り返してできるようになりました！
皆さんもぜひやってみてください！
また、コマンドやコードが違っていたら教えてください！よろしくお願いします！

詳しい内容は、また別の記事で書いていこうと思います❤️‍🔥