storybook + nextjs router: NextContext.Provider is undefined, please add it to parameters.nextRouter.Provider

Question

I'm really fighting to get storybook, and nextjs router to play together. I'm getting the following error:

NextContext.Provider is undefined, please add it to parameters.nextRouter.Provider

I've setup a nextjs + storybook project. Now I have a component which uses useRouter. I have followed the official guideline. This is my main.js file:

module.exports = {
  stories: [],
  addons: [
    '@storybook/addon-essentials', 
    'storybook-addon-next-router'
  ]
};

And this is my preview.js file:

import { RouterContext } from "next/dist/next-server/lib/router-context";

export const parameters = {
  nextRouter: {
    Provider: RouterContext.Provider,
  },
}

When I preview the storybook and navigate to my component, I get the error:

NextContext.Provider is undefined, please add it to parameters.nextRouter.Provider

I can't figure out what else I should do. Thanks for your suggestion.

Otti

What version of next are you using? – Linker

Answer 1

You will need to add it to your Global Parameters in preview.js like so:

// .storybook/preview.js

import { RouterContext } from "next/dist/shared/lib/router-context";

// ... 

export const parameters = {
  nextRouter: {
    Provider: RouterContext.Provider,
    locale: "en" // optional
  },
};

Semidiurnal