[Bug]: Next.js 14 app/ routing not working in Storybook

[algoORgoal]

Describe the bug

I followed the next.js guideline in the official docs.

1. Since I'm only using 'app' directory routing, I set nextjs: { appDirectory: true, },.

preview.tsx

import { helloHandler } from "../mocks/api/hello";
import type { Preview } from "@storybook/react";
import { initialize, mswLoader } from "msw-storybook-addon";
import "../app/globals.css";
import "./preview.css";
import React from "react";
import withAppRouterContext from "./withAppRouterContext";

initialize();

const preview: Preview = {
 decorators: [
 ],
 parameters: {
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/i,
     },
   },
   msw: {
     handlers: {
       hello: [...helloHandler],
     },
   },
   nextjs: {
     appDirectory: true,
   },
 },
 // Provide the MSW addon loader globally
 loaders: [mswLoader],
};

export default preview;

2. In my Header.stories.tsx, I set the pathname and asPath.

Header.stories.tsx

import type { Meta, StoryObj } from "@storybook/react";
import { Header } from "@/src/widgets/header";

const meta = {
  title: "Widgets/Header",
  component: Header,
  tags: ["autodocs"],
  parameters: {
    nextjs: {
      router: {
        pathname: "/booth",
        asPath: "/booth",
      },
    },
  },
} satisfies Meta<typeof Header>;

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

export const Default: Story = {};

export const Navigatable: Story = {};

// TODO write tests for different pathnames and different history stack

3. I attempted to check the pathname in Header.tsx, but it's fixed to /.

Header.tsx

"use client";

import { ChevronLeftIcon } from "@radix-ui/react-icons";
import { usePathname, useRouter } from "next/navigation";
import React from "react";

export function Header() {
  const router = useRouter();
  const pathname = usePathname();

  console.log(router);
  console.log(pathname);

  return (
    <header>
      <div className="relative flex items-center justify-center rounded-b-3xl pb-6 pt-5 shadow-lg">
        <div className="relative">
          {pathname !== "/" && (
            <button type="button" onClick={() => router.back()}>
              <ChevronLeftIcon />
            </button>
          )}
        </div>
        <div className="shrink-0 font-black">운영자모드</div>
      </div>
    </header>
  );
}

directory structure

To Reproduce

https://github.com/algoORgoal/repo-router-not-working/tree/feature/booth-create

System

Storybook Environment Info:

  System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
  Binaries:
    Node: 20.12.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD <----- active
    npm: 10.5.2 - ~\AppData\Roaming\npm\npm.CMD
  Browsers:
    Chrome: 123.0.6312.123
    Edge: Chromium (123.0.2420.97)
  npmPackages:
    @storybook/addon-coverage: ^1.0.1 => 1.0.1
    @storybook/addon-essentials: ^8.0.8 => 8.0.8
    @storybook/addon-interactions: ^8.0.8 => 8.0.8
    @storybook/addon-links: ^8.0.8 => 8.0.8
    @storybook/addon-onboarding: ^8.0.8 => 8.0.8
    @storybook/blocks: ^8.0.8 => 8.0.8
    @storybook/nextjs: ^8.0.8 => 8.0.8
    @storybook/react: ^8.0.8 => 8.0.8
    @storybook/test: ^8.0.8 => 8.0.8
    @storybook/test-runner: ^0.17.0 => 0.17.0
    eslint-plugin-storybook: ^0.8.0 => 0.8.0
    msw-storybook-addon: ^2.0.0-beta.2 => 2.0.0-beta.2
    storybook: ^8.0.8 => 8.0.8

Additional context

No response

[valentinpalkovic]

Hi @algoORgoal

thank you for reporting the issue.

I think #26874 might have already fixed the issue. The fix will be part of the upcoming 8.0.9 release.

@yannbf Can you confirm this or is this issue unrelated to your recent fix?

[RickyRoller]

@algoORgoal You have to use the updated parameters for next navigation
https://storybook.js.org/docs/get-started/nextjs#nextjs-navigation

In your case, this code

const meta = {
  title: "Widgets/Header",
  component: Header,
  tags: ["autodocs"],
  parameters: {
    nextjs: {
      router: {
        pathname: "/booth",
        asPath: "/booth",
      },
    },
  },
} satisfies Meta<typeof Header>;

Would change to this

const meta = {
  title: "Widgets/Header",
  component: Header,
  tags: ["autodocs"],
  parameters: {
    nextjs: {
      navigation: {
        pathname: "/booth"
      },
    },
  },
} satisfies Meta<typeof Header>;

[algoORgoal]

Thank you very much!