Storybook Next Router 插件

在您的 Storybook stories 中使用 Next.js 路由器。

这是 storybook-addon-next-router 库的一个分支。它解决了与 next v11.2+ 的兼容性问题。

版本

• 如果您正在使用 storybook 5.x，请使用 storybook-addon-next-router 1.x
• 如果您正在使用 storybook 6.x，请使用 storybook-addon-next-router 2.x
• 如果您正在使用 storybook 6.x 和 next 11.2+，请使用 @gogaille/storybook-addon-next-router 4.x

在 story 中作为装饰器

import { withNextRouter } from 'storybook-addon-next-router';
import MyComponentThatHasANextLink from '../component-that-has-a-next-link';

export default {
  title: 'My Story',
  decorators: [withNextRouter], // not necessary if defined in preview.js
};

// if you have the actions addon
// you can click the links and see the route change events there
export const Example = () => <MyComponentThatHasANextLink />;

Example.story = {
  parameters: {
    nextRouter: {
      path: '/profile/[id]',
      asPath: '/profile/lifeiscontent',
      query: {
        id: 'lifeiscontent',
      },
    },
  },
};

在 preview.js 中的用法

简单

import { withNextRouter } from 'storybook-addon-next-router';

export decorators = [
  withNextRouter
];

自定义

import { withNextRouter } from 'storybook-addon-next-router';

export decorators = [
  withNextRouter({
    path: '/', // defaults to `/`
    asPath: '/', // defaults to `/`
    query: {}, // defaults to `{}`
    push() {} // defaults to using addon actions integration, can override any method in the router
  })
];

如果您在预览中设置了 withNextRouter，则无需在每个 story 的 decorators 键中添加它，如果您的许多 story 依赖于 Apollo，请考虑这样做。

在 https://nextjs.net.cn/docs/api-reference/next/router 阅读更多关于 next/router 可用选项的信息

示例应用

查看示例应用，了解此插件在实际应用中的用法

https://github.com/lifeiscontent/realworld