next/link in story not working

[primal sluice]

I have a navigation that has some next/links and to visually see what route I am on I use styling on the link that makes it blue. When clicking the different links I get an action nextNavigation.push: (2) ["/foo", Object] but for some reason the first nav item always stays highlighted. When I put the navigation into my actual project, everything works as it supposed to work. Any ideas?

My story in code:

import { Meta, StoryObj } from '@storybook/react';
import MetaNavigation from './MetaNavigation';

const meta: Meta<typeof MetaNavigation> = {
  title: 'UI/MetaNavigation',
  component: MetaNavigation,
  tags: ['autodocs'],
};

export default meta;
type Story = StoryObj<typeof MetaNavigation>;

export const Example = {
  parameters: {
    nextjs: {
      appDirectory: true,
      navigation: {
        pathname: '/',
      },
    },
  },
};

[granite ingot]

Can you share your component code too?

[primal sluice]

yes mom

'use client';

import React from 'react';
import PhoneIcon from '@/common/icons/Phone/Phone';
import NavLink from './NavLink';
import { usePathname } from 'next/navigation';

const MetaNavigation = () => {
  const pathname = usePathname();
  const isPrivatkundenActive = pathname === '/';

  return (
    <div className="hidden min-h-[48px] items-center justify-between gap-4 border-b border-gray-100 px-[30px] py-2 text-sm lg:flex">
      <div className="flex items-center space-x-8">
        <NavLink to="/">Privatkunden</NavLink>
        <NavLink to="/geschaeftskunden">Geschäftskunden</NavLink>
        <NavLink to="/wohnungswirtschaft">Wohnungswirtschaft</NavLink>
        <NavLink to="/kommunen">Kommunen</NavLink>
        <NavLink to="/unternehmen">Unternehmen</NavLink>
      </div>
      <div className="flex items-center space-x-8">
        <NavLink to="/magazin">Magazin</NavLink>
        {isPrivatkundenActive && (
          <div tabIndex={0} className="flex items-center gap-1 rounded-[64px] bg-basalt px-3 py-1 text-white">
            <PhoneIcon /> Bestellung: xxx xxxxx
          </div>
        )}
      </div>
    </div>
  );
};

export default MetaNavigation;

[granite ingot]

I see. Storybook mocks out next/navigation to make it work, but it doesn't actually change what gets passed to usePathname(). So your component expects the path name to change, but Storybook doesn't change it when you navigate, it just logs the action for you.

The only way to change this would be to pass the pathname in as a prop from the component instead, and then you can set that pathname in your story as an arg.
Feel free to submit a feature request to expand the next/navigation mock to support this use case.

[primal sluice]

ok I understand... thank you!

passing it is no option since I have it in my RootLayout which is a server component and I would have to add a middleware to get the pathname and pass it into the component

too much boilerplate just to navigate around in storybook

but thanks anyway... I will have a look for the feature request

do you have a link where I can request that?

[granite ingot]

you can request the feature here: https://github.com/storybookjs/storybook/discussions/new?category=ideas

If it's more involved and you would like to request more integrations with nextjs than just that, it might need an RFC instead. (the line between the two is blurry)
https://github.com/storybookjs/storybook/discussions/new?category=rfc