armandabric / storybook-addon-next-router

Addon to use Next.js Router in Storybook

Storybook Addon Next Router

Use Next.js Router in your Storybook stories.

Versions

• Use 1.x if you're using storybook 5.x
• Use 2.x if you're using storybook 6.x

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