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()

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: { ... }
};

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

Top comments (1)

Vasiliy Telyatnikov • Jun 11

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: '/',
    },
  },
};