0%

nextjs + typescript + storybook 프로젝트생성

nextjs+typescript+storybook 프로젝트 생성하기

들어가기

  • 실습환경
    • windows10
    • wsl2
    • vscode

실습시작

nextjs + typescript 설정

프로젝트 폴더를 생성한다. 나는 nextstorybook 이라는 폴더를 생성했다.

아래 명령어를 wsl 터미널에서 순차적으로 진행한다.

1
2
3
4
mkdir nextstorybook
cd nextstorybook
yarn init -yes
yarn add next react react-dom

nextjs+typescript+storybook%204be80d081f864324a4e5a6fd48396fd3/Untitled.png

pages 폴더를 생성한다.

1
mkdir pages

nextjs+typescript+storybook%204be80d081f864324a4e5a6fd48396fd3/Untitled%201.png

pages 폴더 내부의 index.tsx 파일과 프로젝트 루트폴더에 tsconfig.json 파일을 생성한다.

1
2
touch ./pages/index.tsx
touch tsconfig.json

nextjs+typescript+storybook%204be80d081f864324a4e5a6fd48396fd3/Untitled%202.png

json 파일을 수정해야 하므로 편한 vscode 를 열어서 수정해보자.

package.json 파일에 아래 scripts 부분을 추가하자.

1
2
3
4
5
6
7
"scripts": {
"dev": "next",
"start": "next start",
"build": "next build",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
}

nextjs+typescript+storybook%204be80d081f864324a4e5a6fd48396fd3/Untitled%203.png

타입스크립트 관련 라이브러리를 추가하자.

1
yarn add --dev typescript @types/react @types/node

nextjs+typescript+storybook%204be80d081f864324a4e5a6fd48396fd3/Untitled%204.png

앞서 생성한 pages/index.tsx 파일을 아래 코드로 채워주자.

1
2
const Index = ()=>( <h1>Here i am</h1> );
export default Index;

nextjs+typescript+storybook%204be80d081f864324a4e5a6fd48396fd3/Untitled%205.png

이제 nextjs에 typescript 셋팅까지는 끝냈다. 아래 명령으로 nextjs가 정상동작하는지 확인하자.

1
yarn run dev

nextjs+typescript+storybook%204be80d081f864324a4e5a6fd48396fd3/Untitled%206.png

생각보다 구동에 시간이 걸린다. 위 이미지 처럼 complied successfully 가 나올때까지 기다려주자.

아래처럼 동작을 확인 할 수 있다.

내 경우 wsl 내부에서 nextjs를 구동했으므로 아래와 같은 ip로 구동이 되었다.

nextjs+typescript+storybook%204be80d081f864324a4e5a6fd48396fd3/Untitled%207.png

nextjs+typescript+storybook%204be80d081f864324a4e5a6fd48396fd3/Untitled%208.png

nextjs+storybook 적용

이제 storybook을 적용해보자.

아래 명령어로 storybook을 설치하자.

1
npx sb init

nextjs+typescript+storybook%204be80d081f864324a4e5a6fd48396fd3/Untitled%209.png

위 이미지는 vscode의 터미널인데 주의할것은 wsl 터미널이다.

아래 명령어로 storybook을 실행하자.

1
yarn storybook

이 작업도 좀 오래 걸린다.

nextjs+typescript+storybook%204be80d081f864324a4e5a6fd48396fd3/Untitled%2010.png

nextjs+typescript+storybook%204be80d081f864324a4e5a6fd48396fd3/Untitled%2011.png

위처럼 storybook이 실행되었다고 나오면 브라우저에서 확인해보자.

nextjs+typescript+storybook%204be80d081f864324a4e5a6fd48396fd3/Untitled%2012.png

실습 끝!!!

참고자료

https://dev.to/wonder2210/next-js-storybook-typescript-2021-guide-2ab4