你可能不需要这个项目

https://storybook.org.cn/blog/integrate-nextjs-and-storybook-automatically/

Storybook 插件 Next 路由器

在你的 Storybook 故事中使用 Next.js 路由器。

版本

• 如果你使用的是 storybook 5.x，请使用 1.x
• 如果你使用的是 storybook 6.x，请使用 3.x
• 如果你使用的是 storybook 6.x 和 react 18，请使用 4.x

注意：这些文档指的是 3.0

在 .storybook/main.js 中将插件添加到你的配置中

module.exports = {
  ...config,
  addons: [
    ...your addons
    "storybook-addon-next-router",
  ],
};

将 RouterContext.Provider 添加到 .storybook/preview.js 中

import { AppRouterContext } from "next/dist/shared/lib/app-router-context"; // next 13 next 13 (using next/navigation)
// import { RouterContext } from "next/dist/shared/lib/router-context"; // next 13 (using next/router) / next 12
// import { RouterContext } from "next/dist/shared/lib/router-context"; // next 11.1
// import { RouterContext } from "next/dist/next-server/lib/router-context"; // next < 11.1

export const parameters = {
  nextRouter: {
    Provider: AppRouterContext.Provider, // next 13 next 13 (using next/navigation)
    // Provider: RouterContext.Provider, // next 13 (using next/router) / next < 12
  },
}

在故事中的使用

import MyComponentThatHasANextLink from "../component-that-has-a-next-link";

export default {
  title: "My Story",
};

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

Example.parameters = {
  nextRouter: {
    pathname: "/profile/[id]",
    asPath: "/profile/lifeiscontent",
    query: {
      id: "lifeiscontent",
    },
  },
};

自定义默认值

在 preview.js 中

export const parameters = {
    nextRouter: {
        pathname: '/', // defaults to `/`
        asPath: '/', // defaults to `/`
        query: {}, // defaults to `{}`
        push() {
        } // defaults to using addon actions integration,
        //   can override any method in the router
    }
};

了解更多关于 next/router 可用选项的信息，请访问 https://nextjs.net.cn/docs/api-reference/next/router

示例应用

要查看如何使用此插件的实际应用，请查看示例应用

https://github.com/lifeiscontent/realworld