DEV Community

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.

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more

AWS Security LIVE!

Hosted by security experts, AWS Security LIVE! showcases AWS Partners tackling real-world security challenges. Join live and get your security questions answered.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️