【Next.js】Storybookで`Error: invariant expected app router to be mounted`

はじめに

こんにちは、エンジニアのkeitaMaxです。

Next.jsでStorybookを使用して開発をしていた時に困ったことを備忘録として記載します。

エラー内容

Storybookで以下のようなエラーが出てしまいました。

Error: invariant expected app router to be mounted
  at useQuestionView (/views-QuestionListView-index-stories.iframe.bundle.js:416:74))
  at QuestionListView (/views-QuestionListView-index-stories.iframe.bundle.js:463:81))
  at renderWithHooks (/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_js-node_modules_storyboo-e8168e.iframe.bundle.js:46582:18))
  at updateFunctionComponent (/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_js-node_modules_storyboo-e8168e.iframe.bundle.js:51751:20))
  at updateSimpleMemoComponent (/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_js-node_modules_storyboo-e8168e.iframe.bundle.js:51460:10))
  at updateMemoComponent (/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_js-node_modules_storyboo-e8168e.iframe.bundle.js:51361:14))
  at beginWork$1 (/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_js-node_modules_storyboo-e8168e.iframe.bundle.js:54008:16))
  at beginWork (/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_js-node_modules_storyboo-e8168e.iframe.bundle.js:62388:14))
  at performUnitOfWork (/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_js-node_modules_storyboo-e8168e.iframe.bundle.js:61212:12))

修正内容

.storybook/preview.tsを以下のように修正しました。

preview.ts

import type { Preview } from '@storybook/react';
import "../src/styles/globals.css";
const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    // 以下を追加
    nextjs: {
      appDirectory: true,
    },
    //以上を追加
  },
};

export default preview;

これを追加することでエラーは出なくなり、

import { useRouter } from "next/navigation"

が使用できるようになりました。

おわりに

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！

参考