NextRouter was not mounted." occurs in storybook - reactjs

Question

I am using next13. So I have raised storybook to version7.
However, when I start up story-book, I get the next-route error.
The cause is that I am using router in AppContext. If I comment out the router part, the storybook works.
I am making the transition to the screen according to the error content in the AppContext. (using router).
error
NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted
import * as React from 'react';
import { initialize, mswDecorator } from 'msw-storybook-addon';
import { AppContextProvider } from '../src/context/AppContextProvider';
import { NextPageWithLayout } from '../src/pages/_app.page';
import {
mockOrganization,
mockList,
} from '../src/stories/mocks/msw-handlers';
import 'style/index.css';
import 'style/utils/slider.css';
import 'tailwindcss/tailwind.css';
initialize();
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
layout: 'fullscreen',
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
msw: {
handlers: {
'/organization': mockOrganization(),
'/master': mockList(),
},
},
chromatic: {
viewports: [375, 768, 1200],
},
};
export const decorators = [
(Story: NextPageWithLayout) => {
const getLayout = Story.getLayout ?? (page => page);
return <AppContextProvider>{getLayout(<Story />)}</AppContextProvider>;
},
mswDecorator,
];

Answer 1

Make sure that the Router is properly initialized and mounted in your Storybook setup
import * as React from 'react';
import { Router } from 'next/router';
import { initialize, mswDecorator } from 'msw-storybook-addon';
import { AppContextProvider } from '../src/context/AppContextProvider';
import { NextPageWithLayout } from '../src/pages/_app.page';
import {
mockOrganization,
mockList,
} from '../src/stories/mocks/msw-handlers';
import 'style/index.css';
import 'style/utils/slider.css';
import 'tailwindcss/tailwind.css';
initialize();
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
layout: 'fullscreen',
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
msw: {
handlers: {
'/organization': mockOrganization(),
'/master': mockList(),
},
},
chromatic: {
viewports: [375, 768, 1200],
},
};
const RouterDecorator = (Story: NextPageWithLayout) => {
const [isRouterReady, setIsRouterReady] = React.useState(false);
React.useEffect(() => {
Router.ready(() => {
setIsRouterReady(true);
});
}, []);
const getLayout = Story.getLayout ?? (page => page);
return (
<React.Fragment>
{isRouterReady && (
<AppContextProvider>
{getLayout(<Story />)}
</AppContextProvider>
)}
</React.Fragment>
);
};
export const decorators = [RouterDecorator, mswDecorator];