[Next.js] Next에서 Styled Components와 함께 Storybook 세팅하기

Create-Next-App을 통해 생성한 Next.js 프로젝트에서 storybook 초기 설정하는 방법에 대해 알아보겠습니다.

Storybook 설치하기

npx storybook@latest init

위 명령어로 storybook의 최신버전을 프로젝트에 설치합니다.

yarn add -D @storybook/nextjs

설치를 완료했다면 nextjs를 지원하는 패키지도 설치해줍니다. 설치를 완료했다면 아래 코드를 .storybook/main.ts 파일에 추가해줍니다.

// .storybook/main.ts
const config: StorybookConfig = {
  //...
  framework: {
    name: '@storybook/nextjs',
    options: {},
  },
}

npm run storybook

세팅을 마쳤다면 npm run storybook 명령어로 스토리북을 실행할 수 있습니다.

Storybook에서 Next.js의 절대 경로 사용하기

create-next-app으로 next.js의 최신버전을 설치하면 tsconfig 파일에 기본적으로 src/를 @/로 치환하는 절대경로가 설정되어있습니다.

//tsconfig.json
{
  "compilerOptions": {
    ...
    "paths": {
      "@/*": ["./src/*"]
    }
}

별도의 설정없이 storybook의 컴포넌트 내에서 절대 경로를 사용한다면 다음과 같은 에러가 발생합니다.

따라서 아래와 같이 .storybook/main.ts 파일에 절대경로 설정을 추가해줍니다.

// .storybook/main.ts
const path = require('path');

const config: StorybookConfig = {
  ...
  webpackFinal: async config => {
    config.resolve.alias['@'] = path.resolve(__dirname, '../src/');
    return config;
  },
}

storybook에 public 폴더의 이미지 불러오기

프로젝트를 진행할 때 public폴더에서 불러오고 싶다면 storybook에 정적 파일이 존재하는 위치를 알려줘야합니다.

//main.ts
const config: StorybookConfig = {
  ...
  staticDirs: ['../public'],
}

위와같이 static 경로를 ../public으로 설정한다면 storybook에서 public폴더의 이미지를 불러올 수 있습니다.

Styled Components 적용하기

storybook에서 styled-components를 사용하려면 이를 지원하는 관련 패키지를 설치해야합니다. 

npm add -D @storybook/addon-styling

우선 @storybook/addon-styling 패키지를 DevDependencies에 추가합니다. 그리고 아래 코드를 .storybook/main.ts에 추가해줍니다.

// .storybook/main.ts
module.exports = {
  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-essentials', '@storybook/addon-styling'],
  // ...
};

Styled Components의 GlobalStyles 적용하기

만약 프로젝트에서 globalStyles를 사용한다면, .storybook/preview.ts에 decorators를 추가하면 globalStyles가 적용됩니다.

// .storybook/preview.ts
import { withThemeFromJSXProvider } from '@storybook/addon-styling';
import { GlobalStyles } from '../src/styles';

// ...

export const decorators = [
  withThemeFromJSXProvider({
    GlobalStyles,
  }),
];

Styled Components의 ThemeProvider 적용하기

프로젝트에서 themeProvider를 사용하고싶다면 withThemeFromJSXProvider 속성값에 themeProvider를 추가해주세요.

// .storybook/preview.ts
import { ThemeProvider } from 'styled-components';
import { withThemeFromJSXProvider } from '@storybook/addon-styling';
import { GlobalStyles, theme } from '../src/styles';

export const decorators = [
  withThemeFromJSXProvider({
    themes: { theme },
    Provider: ThemeProvider,
    GlobalStyles,
  }),
];

export default preview;

참고자료

글 작성시 참고한 문서입니다. 관련해서 추가적인 정보를 원하시면 아래 공식문서에서 확인해주세요.

https://storybook.js.org/recipes/next

https://storybook.js.org/recipes/styled-components