Storybook + nextjs router: NextContext.Provider未定义，请将其添加到parameters.nextRouter.Provider

Question

我真的很努力让故事书和 nextjs 路由器一起玩。我收到以下错误：

NextContext.Provider未定义，请将其添加到parameters.nextRouter.Provider中

我已经设置了一个 nextjs + 故事书项目。现在我有一个使用useRouter. 我遵循了官方指南。这是我的main.js文件：

module.exports = {
  stories: [],
  addons: [
    '@storybook/addon-essentials', 
    'storybook-addon-next-router'
  ]
};

这是我的preview.js文件：

import { RouterContext } from "next/dist/next-server/lib/router-context";

export const parameters = {
  nextRouter: {
    Provider: RouterContext.Provider,
  },
}

当我预览故事书并导航到我的组件时，出现错误：

NextContext.Provider is undefined, please add it to parameters.nextRouter.Provider

我不知道我还应该做什么。感谢您的建议。

Answer 1

您需要将其添加到Preview.js中的全局参数中，如下所示：

// .storybook/preview.js

import { RouterContext } from "next/dist/shared/lib/router-context";

// ... 

export const parameters = {
  nextRouter: {
    Provider: RouterContext.Provider,
    locale: "en" // optional
  },
};