DEV Community

Cover image for How to use NextJS pathname in Storybook 8
Mark Kop
Mark Kop

Posted on

How to use NextJS pathname in Storybook 8

#todayilearned #webdev #tutorial #frontend

When you're using usePathname from NextJS

import { usePathname } from 'next/navigation' const pathname = usePathname()
Enter fullscreen mode Exit fullscreen mode

And want to change the pathname for Storybook purposes, update your story as follows:

export const Default = { parameters: { nextjs: { appDirectory: true, navigation: { pathname: '/games' } } }, args: { ... } };
Enter fullscreen mode Exit fullscreen mode

Source: qcatch on Feb 22, 2024
https://github.com/storybookjs/storybook/discussions/25470

Top comments (1)

Collapse
 
vasiliy0s profile image
Vasiliy Telyatnikov •

Also possible to fix on system-wide level by adding similar config to preview.tsx (preview.ts or preview.js, whenever was used on your project):

// file: .storybook/preview.js export const parameters = { nextRouter: { Provider: RouterContext.Provider, }, nextjs: { appDirectory: true, navigation: { pathname: '/', }, }, };
Enter fullscreen mode Exit fullscreen mode

With this way this default args will be applied to all stories you have.