Storybook+Next.js14 Error: invariant expected app router to be mounted

💻 에러 당시 배경

평화롭게 storybook과 next.js14 버전을 이용하여 컴포넌트를 구성하던 중, storybook 개발서버를 실행시키니 특정 컴포넌트를 불러올 때 새로운 에러가 날 맞이했다...

해당 컴포넌트 안에서 useRouter(from next/navigation)를 사용했었는데, 이 부분이 문제인 것처럼 보였다.

 

🤔 문제 원인

이 문제는 Next.js app 디렉터리를 사용해서 나타난다.

 

Storybook은 현재 글을 쓰고 있는 시점에서는 pages 디렉터리를 기본으로 지원하고있다.

 

Next.js 13부터 app 디렉터리를 실험적으로 도입하기 시작했는데, Storybook에서는 app 디렉터리를 사용하든, pages 디렉터리를 사용하든 똑같이 pages 디렉터리 설정으로 만들어주는 것이 문제였던 것이다.

 

그러므로, Storybook에 설정을 추가하여 우리의 next.js가 app 디렉터리를 사용하고있다고 알려주어야한다.

 

💡 해결 방법

전체에 적용하고 싶다면 .storybook/preview.tsx 파일에, 아니라면 특정 storybook 컴포넌트에 다음 코드를 적용하면 해결된다!

parameters: {
  nextjs: {
    appDirectory: true,
  },
}

 

참고자료: 

Next.js discussions - https://github.com/vercel/next.js/discussions/50068

스토리북 공식 블로그 - https://storybook.js.org/blog/integrate-nextjs-and-storybook-automatically/