Next.js14(App Router)でStorybookを使用する方法。

本記事は以下の公式ドキュメント等を参考にしてます。
https://storybook.js.org/docs/8.0/get-started/nextjs
https://github.com/vercel/next.js/discussions/50068
https://qiita.com/sinnlosses/items/51e614570180c5f12e86

Storybookのインストール

以下のコマンドをNext.jsアプリのルートディレクトリで実行してください。

bunx storybook@next init

Storybookのバージョンが6以下の場合

以下のコマンでを実行しStorybookのバージョンをアップグレードしてください。

bunx storybook@next upgrade

Storybookの設定

aliasの設定

tsconfig.jsonのエイリアス設定をStorybook内部のWebpackが認識出来るようにする必要があります。

ライブラリのインストール

tsconfig-paths-webpack-pluginというライブラリを使用します。

bun add -D tsconfig-paths-webpack-plugin

main.tsの変更

.storybook/main.ts

import type { StorybookConfig } from "@storybook/nextjs";
// インポート文の追加
import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-onboarding",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/nextjs",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
  // ▼ ▼ ▼ 設定を追加
  webpackFinal(baseConfig) {
    baseConfig.resolve!.alias = {
      ...baseConfig.resolve!.alias,
    };
    baseConfig.resolve!.plugins = [
      ...(baseConfig.resolve!.plugins || []),
      new TsconfigPathsPlugin(),
    ];
    return baseConfig;
  },
  // ▲ ▲ ▲
};
export default config;

パスの設定

App Routerを使用するにあたり、main.tsのパスを変更します。

.storybook/main.ts

import type { StorybookConfig } from "@storybook/nextjs";
import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";

const config: StorybookConfig = {
  // stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  // appに変更する
  stories: ['../app/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-onboarding",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/nextjs",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
  webpackFinal(baseConfig) {
    baseConfig.resolve!.alias = {
      ...baseConfig.resolve!.alias,
    };
    baseConfig.resolve!.plugins = [
      ...(baseConfig.resolve!.plugins || []),
      new TsconfigPathsPlugin(),
    ];
    return baseConfig;
  },
};
export default config;

Storyファイルの作成

以下のコードを設定することで、App Routerに対応出来ます。

parameters: {
  nextjs: {
    appDirectory: true,
  },
},

Storyファイルの作成

button.stories.tsx

import type { Meta, StoryObj } from '@storybook/react'
import Button from '.'

const meta = {
  title: 'Button',
  component: Button,
  parameters: {
    nextjs: {
      appDirectory: true,
    },
  },
} as Meta<typeof Button>

export default meta

type Story = StoryObj<typeof Button>

export const Default: Story = {}

Storybookを実行

以下のコマンドを実行し、http://localhost:6006にアクセスすくことで確認出来ます。

bun run storybook