getStart

Storybook for Next.js • Storybook docs

Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free.

https://storybook.js.org/docs/get-started/nextjs

1. install(nextjs)

npx storybook@latest init

nextjs Storybook tailwind 설치할 때 추가적으로 설치하기!

npm install -D postcss autofrefixer

/** @type {import('postcss-load-config').Config} */
export const plugins = {
  tailwindcss: {},
  autoprefixer: {},
};

의존성 목록

  "devDependencies": {
    "@chromatic-com/storybook": "^1.3.5",
    "@storybook/addon-a11y": "^8.0.10",
    "@storybook/addon-essentials": "^8.0.10",
    "@storybook/addon-interactions": "^8.0.10",
    "@storybook/addon-links": "^8.0.10",
    "@storybook/addon-onboarding": "^8.0.10",
    "@storybook/addon-styling-webpack": "^1.0.0",
    "@storybook/blocks": "^8.0.10",
    "@storybook/nextjs": "^8.0.10",
    "@storybook/react": "^8.0.10",
    "@storybook/test": "^8.0.10",
    "autoprefixer": "^10.4.19",
    "postcss": "^8.4.38",
    "prettier-plugin-tailwindcss": "^0.5.14",
    "sass": "^1.77.1",
    "storybook": "^8.0.10",
    "tailwindcss": "^3.4.3",
    "@svgr/webpack": "^8.1.0", // svg 사용하기 위한 의존성
  }

// next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
// 스토리북 확장자 제거
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    config.module.rules.push({
      test: /\.stories\.(ts|js|tsx|jsx)$/,
      loader: 'ignore-loader'
    });
	// 스토리북 루트경로제거
    config.module.rules.push({
      test: /\.storybook/,
      loader: 'ignore-loader'
    });

    return config;
  },

};

export default nextConfig;

// .storybook/main.js
import type { StorybookConfig } from '@storybook/nextjs';
import path from 'path';

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-onboarding',
    '@storybook/addon-links',
    '@storybook/addon-essentials', 
    '@chromatic-com/storybook', // 크로마틱 배포
    '@storybook/addon-interactions', // 컴포넌트 상호작용 테스트
    '@storybook/addon-a11y', // 웹 접근성 검사.
  ],
  framework: {
    name: '@storybook/nextjs',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
  staticDirs: ['..\\public'],
  webpackFinal: async config => {
    config.module = config.module || {};
    config.module.rules = config.module.rules || [];

    // This modifies the existing image rule to exclude .svg files
    // since you want to handle those files with @svgr/webpack
    // svg 인식하기 위한 웹팩 설정
    const imageRule = config.module.rules.find(rule => rule?.['test']?.test('.svg'));
    if (imageRule) {
      imageRule['exclude'] = /\.svg$/;
    }

    // Configure .svg files to be loaded with @svgr/webpack
     // svg 인식하기 위한 웹팩 설정
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });
		// @ alias 설정
    if (config.resolve) {
      config.resolve.alias = {
        ...config.resolve.alias,
        '@': path.resolve(__dirname, '../src'),
      };
    }
    return config;
  },
};
export default config;

{
  "extends": [
    "next/core-web-vitals",
    "prettier",
    "plugin:storybook/recommended"
  ],
  "ignorePatterns": [
    "**/*.stories.tsx",
    "**/*.stories.ts",
    "**/*.stories.js",
    "**/*.stories.jsx",
    ".storybook/**"
  ]
}

2. 실행

npm run storybook