How to use NextJS pathname in Storybook 8

heymarkkop

Mark Kop

Posted on April 29, 2024

How to use NextJS pathname in Storybook 8

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

💖 💪 🙅 🚩
heymarkkop
Mark Kop

Posted on April 29, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

How to use NextJS pathname in Storybook 8
todayilearned How to use NextJS pathname in Storybook 8

April 29, 2024