@gogaille/storybook-addon-next-router
    TypeScript icon, indicating that this package has built-in type declarations

    4.0.0 • Public • Published

    Storybook Addon Next Router

    Use Next.js Router in your Storybook stories.

    This is a fork of the storybook-addon-next-router library. It fix the compatibility with next v11.2+.

    Versions

    • Use storybook-addon-next-router 1.x if you're using storybook 5.x
    • Use storybook-addon-next-router 2.x if you're using storybook 6.x
    • Use @gogaille/storybook-addon-next-router 4.x if you're using storybook 6.x and next 11.2+

    As a decorator in a 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',
          },
        },
      },
    };

    Usage in preview.js

    Simple

    import { withNextRouter } from 'storybook-addon-next-router';
    
    export decorators = [
      withNextRouter
    ];

    Custom

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

    If you set up withNextRouter in preview, it will not need to be added to the decorators key in each story, consider doing this if you have a lot of stories that depend on Apollo.

    Read more about the options available for next/router at https://nextjs.org/docs/api-reference/next/router

    Example App

    To see real world usage of how to use this addon, check out the example app:

    https://github.com/lifeiscontent/realworld

    Install

    npm i @gogaille/storybook-addon-next-router

    DownloadsWeekly Downloads

    2,444

    Version

    4.0.0

    License

    MIT

    Unpacked Size

    23 kB

    Total Files

    12

    Last publish

    Collaborators

    • spy-seth