Running Storybook Stories contains Hooks of Next.js

I created a Storybook story contains UI components which used useNavigation from Next.js inside. When I run storybook instance, it display error page instead:

In the Next.js discussion, there is a discussion which people talked about it, and I found a solution.

Luckily, I just recently updated Storybook to 10, so I can use this parameter to resolve this.

I added the parameter in preview.ts (or .js) in the folder .storybook to apply to all created components

import { Preview } from '@storybook/nextjs-vite'

const preview: Preview = {
	...other options...
	parameters: {
		 ...other parameter...
		 nextjs: {
			 appDirectory: true,
		},
	},
}
export default preview