Next.js + Storybook 설정 방법

Next.js

설치

npx storybook init

npm i --save-dev tsconfig-paths-webpack-plugin

설정

// .storybook/main.js

const path = require("path");
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

// ...

module.exports = {
  // ...
  typescript: { reactDocgen: false },
  webpackFinal(config) {
    config.resolve.modules = [
      ...(config.resolve.modules || []),
      path.resolve(__dirname, "../src"),
    ];

    config.resolve.plugins = [
      ...(config.resolve.plugins || []),
      new TsconfigPathsPlugin(),
    ];
    return config;
  },
}

쓰다

// src/components/example.tsx

interface Props {
  text: string;
}

const Example = (props: Props) => {
  return <p data-testid="text">{props.text}</p>;
};

export default Example;

// src/pages/example.tsx

import type { NextPage } from "next";

import Example from "@/components/example";

const Home: NextPage = () => {
  return <Example text={"Hello, World."} />;
};

export default Home;

// src/components/example.stories.tsx

import Example from "@/components/example";

export default { component: Example };

export const Default = {
  args: {
    text: "Hello, World! from Storybook.",
  },
};

운영

npm run storybook

ESLint

# .eslintrs.json

{
  // ...

  "overrides": [
    {
      "files": ["src/**/*.stories.tsx"],
      "rules": {
        "import/no-anonymous-default-export": "off"
      }
    }
  ],

  // ...
}