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

1import { withNextRouter } from 'storybook-addon-next-router';
2import MyComponentThatHasANextLink from '../component-that-has-a-next-link';
3
4export default {
5  title: 'My Story',
6  decorators: [withNextRouter], // not necessary if defined in preview.js
7};
8
9// if you have the actions addon
10// you can click the links and see the route change events there
11export const Example = () => <MyComponentThatHasANextLink />;
12
13Example.story = {
14  parameters: {
15    nextRouter: {
16      path: '/profile/[id]',
17      asPath: '/profile/lifeiscontent',
18      query: {
19        id: 'lifeiscontent',
20      },
21    },
22  },
23};

Usage in preview.js

Simple

1import { withNextRouter } from 'storybook-addon-next-router';
2
3export decorators = [
4  withNextRouter
5];

Custom

1import { withNextRouter } from 'storybook-addon-next-router';
2
3export decorators = [
4  withNextRouter({
5    path: '/', // defaults to `/`
6    asPath: '/', // defaults to `/`
7    query: {}, // defaults to `{}`
8    push() {} // defaults to using addon actions integration, can override any method in the router
9  })
10];

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