[Next.js 13 + Storybook8 적용 시도]

👉 결론 : Next.js13은 Storybook7과 사용 / Next.js14는 Storybook8과 사용

yarn berry (4.1.1) 세팅이 완료된 레포지토리 준비
1. Next.js 13 v13.5.6 (menabi_release next 버전과 동일)
- Yarn Berry v4.1.1 / PnP 방식 사용
Yarn Berry PnP(plug & play) 모드를 사용하는 설치로 진행

CLI options • Storybook docs

storybook에서 사용하는 CLI 명령어 (—use-pnp)
```
yarn dlx storybook@latest init --use-pnp
```
PnP모드로 설치하면 .storybook > main.ts의 addons 배열 내용들이 getAbsolutePath 로 감싸져있음
1. getAbsolutePath : PnP방식을 사용하기때문에 사용하는 addon 패키지에 대하여 절대 경로 적용
storybook8 설치후 yarn storybook 으로 돌려보면 종속성 에러 발생
```
//package.json 의 script에 storybook init설치시 자동으로 작성됨
yarn storybook
```
설치는 완료되었으나, storybook을 돌리지 못하고 에러 발생
- [에러 1 -2]
  - 👾 에러1 : nextjs preset이 뭔가 잘못됨
  - 👾 에러2 : webpack이 뭔가 잘못됨
  - 🧑‍💻 에러1 / 에러 2 에 대한 대처
    - yarnrc.yml 파일에 packageExtensions를 추가 작성
```
yarnPath: .yarn/releases/yarn-4.1.1.cjs
nodeLinker: pnp
enableGlobalCache: false

packageExtensions:
  "@storybook/nextjs@*":
    dependencies:
      "@babel/core": "*"
      webpack: "*"
```
    - 기존 에러1, 에러2가 해결되어 사라지고 다른 에러 발생
  - 👾 에러3 : .storybook/main.ts에 뭔가가 잘못됨
    - SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: ./.storybook/main.ts
    - 에러 4 - 6 고치다보면 사라짐
- [에러 4 - 7]
  - 👾 에러4 : @chromatic-com/storybook이 필요한데 없음
  - 👾 에러5 : @storybook/client-logger이 필요한데 없음
  - 👾 에러6 : @storybook/core-events이 필요한데 없음
  - 🧑‍💻 에러4 / 에러5 / 에러6 에 대한 대처
    - 없다고 에러 나는 각 스토리북 addon을 모두 dev dependency로 install
```
yarn add -D @chromatic-com/storybook

yarn add -D @storybook/client-logger

yarn add -D @storybook/core-events
```
    - 필요한 addon을 모두 설치하고 yarn storybook을 다시하면, preview.ts에 에러 발생
      - 👾 에러7 : .storybook > preview.ts 빌드할때 webpack에 뭔가 잘못됨, storybook 화면은 켜지나 컴파일 에러 표시 (webpack5, babel-loader 관련 에러)
    - init 후 기본 제공되는 Page.stories.ts 파일에서 발생 (제거시 정상 작동)
      - LoggedIn 스토리의 interaction test를 사용한 화면 테스트 시나리오를 작성한 곳에서 발생 (주석처리시 정상 작동)
        
        Interaction tests • Storybook docs
    - [👾 에러7 발생 CASE] nextjs 13
      - storybook v8 공식문서에서 명시하고 있는 사용 가능한 nextjs 버전 (v13.5 이상)
      - 현재 menabi_release next 버전 : v13.5.4
        
        Storybook for Next.js • Storybook docs
      - menabi_release next 버전이 13이면서 yarn pnp 방식을 사용해서 발생하는 것 아닐까 추측 → nodeLinker를 node-modules로 사용하면 정상작동
      - 실제로 storybook이 프로젝트를 pnp 방식으로 관리해도 storybook을 돌릴때마다 node_modules가 생성됨
        
        Install Storybook • Storybook docs
        
        gitignore를 사용하여 생성된 node_modules를 무시하고 사용하라고 가이드 제시
        
        This is a known constraint as Storybook relies on some directories (e.g., .cache) to store cache files and other data to improve performance and faster builds. You can safely ignore these files and folders, adjusting your .gitignore file to exclude them from the version control you're using.
        
        간단 해석 : 스토리북이 빠른 빌드와 퍼포먼스를 향상시키기 위한 캐시 파일들과 여타 데이터들을 저장하기위해 특정 경로들 (.cache같은) 을 의존하기때문에 이것은 알려진 제약 사항이다. 당신의 gitignore 파일을 수정하여 당신은 안전하게 이 파일들과 폴더들을(node_modules) 무시할 수 있다. (당신이 사용 중인 버전 컨트롤에서 node_modules를 제외시키기위하여)
      - nextjs14 프로젝트를 새로 생성하여 확인
        
        nextjs (v14.1.4)
        
        yarn berry (v4.1.1) + pnp
        
        storybook8(^8.0.6)
    - **[**🧑‍💻 에러7 CASE 확인 완료] nextjs14 + storybook8 이었을때만 정상 작동
      - nextjs14의 경우에도 [에러 1 -6] 가 발생, 위에 기재한대로 처리 필요
    - [🧑‍💻 에러7 에 대한 대처]
      - nextjs 13 + yarn berry (v4.1.1) + pnp 의 환경에서는 storybook v7으로 다운그레이드하여 사용이 필요함
      - 기존에 설치된 package.json의 storybook 관련 종속성 및 생성 폴더를 모두 삭제
      - storybook v7 (v7.6.17 : v8 바로 이전 v7) 다운 그레이드하여 새로 init 설치
        
        yarn dlx [email protected] init --use-pnp
        
        storybook7 설치 후 package.json
        
        nextjs v13 과 storybook v7이 yarn berry 4.1.1 pnp 로 정상 작동하는 화면