Forem

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

Posted on

3

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

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.

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay