Storybook 擴充套件 Next 路由器

在你的 Storybook 故事中使用 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

作為故事中的裝飾器

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
  })
];

如果在 preview 中設定了 withNextRouter，則無需將其添加到每個故事的 decorators 鍵中，如果有很多故事都依賴 Apollo，請考慮這樣做。

在 https://nextjs.dev.org.tw/docs/api-reference/next/router 上閱讀更多關於 next/router 可用選項的資訊

範例應用程式

要查看如何使用此擴充套件的真實世界用法，請查看範例應用程式

https://github.com/lifeiscontent/realworld