[Bug]: Next.js Catch-All path segments are basically unusable on sb@v10

[FezVrasta]

Describe the bug

Support for Catch-All segments was undocumented and worked this way:

{
  nextjs: {
    appDirectory: true,
    navigation: {
      segments: [
        ['catch-all', 'as/many/as/you/want', 'c']
      ]
    }
  }
}

The trailing c marked it as "catch-all".

This was removed on storybook v10, now it expects this:

{
  nextjs: {
    appDirectory: true,
    navigation: {
      segments: [
        ['catch-all', ['as', 'many', 'as', 'you', 'want']]
      ]
    }
  }
}

This works fine for useParams, but errors with useSelectedLayoutSegment. It errors with:

The only workaround I found is the following, but I think it's about time to properly document this functionality and fix it if you ask me.

export function makeMockSegment(path: string[]): string[] {
  Object.defineProperty(path, "startsWith", {
    value: () => {
      return false;
    },
  });
  return path;
}


[...]

nextjs: {
  appDirectory: true,
  navigation: {
    segments: [
      ['catch-all', makeMockSegment(['as', 'many', 'as', 'you', 'want'])]
    ]
  }
}

Reproduction link

https://stackblitz.com/edit/github-vm266l82?file=src%2Fstories%2FPage.tsx

Reproduction steps

No response

System

System:
    OS: macOS 26.0
    CPU: (10) arm64 Apple M1 Max
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 24.9.0 - ~/.local/share/mise/installs/node/24.9.0/bin/node
    Yarn: 4.6.0 - ~/.local/share/mise/installs/yarn/4.6.0/bin/yarn <----- active
    npm: 11.6.0 - ~/.local/share/mise/installs/node/24.9.0/bin/npm
  Browsers:
    Chrome: 142.0.7444.60
    Safari: 26.0
  npmPackages:
    @storybook/addon-links: 10.0.5 => 10.0.5 
    @storybook/nextjs: 10.0.5 => 10.0.5

Additional context

No response

[dosubot]

This is a gap in Storybook v10's Next.js integration: catch-all segments as arrays work for useParams, but not for useSelectedLayoutSegment, which expects a string and fails with a TypeError. Your workaround (monkey-patching startsWith) is the only option in 10.0.5, as this isn't covered in the docs and no official workaround exists.

A fix for array-based catch-all segments was merged (PR #31524), but it isn't included in 10.0.5 or any public release yet. Until a new version is published with this fix, you'll need to keep using your workaround.

Keep an eye on upcoming Storybook releases and changelogs for this fix. Once available, upgrade and remove the workaround. If you need to support more complex navigation, review your usage after upgrading, as the segment handling logic will change.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[FezVrasta]

That PR was released in 9.0.13 and it was probably the source of the bug I'm describing, they forgot to update the useSelectedLayoutSegment mock.