[Bug]: public subfolders are not served from URL root when setting it on staticDirs array

[SalahAdDin]

Describe the bug

By logic, for the following staticDirs all its subfolders should be set up as URLs of /: staticDirs: ["../public"],.
So, it should be / for root (public) and /fonts for subfolder(public/fonts).

Well, any subfolder of public becomes /public/*.

It is especially important when working with next/fonts since Storybook is looking to import the fonts from /fonts, making it unable to load fonts properly, see this issue: #19711 (comment).

As a workaround we use:

  staticDirs: [
    {
      from: "../public",
      to: "public",
    },
    { from: "../public/fonts", to: "fonts" },
  ],

Altogether with our decorator, it works. But this solution conflicts with msw-storybook-addon which looks for the worker file on the root URL.

To Reproduce

1. Create a new NextJS project.
2. Set up the addon.
3. Setup the staticDirs:

  /*
  TODO: https://github.com/storybookjs/storybook/issues/19711#issuecomment-1942958750
  staticDirs: [
    {
      from: "../public",
      to: "public",
    },
    { from: "../public/fonts", to: "fonts" },
  ],
  TODO: https://github.com/mswjs/msw-storybook-addon/issues/136
  */
  staticDirs: ["../public"],

4. Create your decorator for importing fonts on the storybooks:

export const FontDecorator = (Story) => (
  <main className={clsx(fonts.notoSerif.variable, fonts.trt.variable)}>
    <Story />
  </main>
);

const preview: Preview = {
  decorators: [
    FontDecorator,
    IntlDecorator,
  ],

5. Run Storybook.
6. Check the fonts are not being loaded:
   
7. Check the link http://localhost:6006/public/fonts/TRT-Bold.woff2, remove public/ from that URL, and you will get the font loaded.

System

Storybook Environment Info:

  System:
    OS: Linux 6.1 Manjaro Linux
    CPU: (16) x64 AMD Ryzen 9 5900HX with Radeon Graphics
    Shell: 5.2.26 - /bin/bash
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    Yarn: 1.22.21 - /usr/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
    pnpm: 8.15.4 - /usr/bin/pnpm <----- active
  npmPackages:
    @storybook/addon-a11y: 8.0.0-beta.6 => 8.0.0-beta.6 
    @storybook/addon-essentials: 8.0.0-beta.6 => 8.0.0-beta.6 
    @storybook/addon-interactions: 8.0.0-beta.6 => 8.0.0-beta.6 
    @storybook/addon-links: 8.0.0-beta.6 => 8.0.0-beta.6 
    @storybook/addon-onboarding: 8.0.0-beta.6 => 8.0.0-beta.6 
    @storybook/addon-storysource: 8.0.0-beta.6 => 8.0.0-beta.6 
    @storybook/addon-themes: 8.0.0-beta.6 => 8.0.0-beta.6 
    @storybook/blocks: 8.0.0-beta.6 => 8.0.0-beta.6 
    @storybook/nextjs: 8.0.0-beta.6 => 8.0.0-beta.6 
    @storybook/react: 8.0.0-beta.6 => 8.0.0-beta.6 
    @storybook/test: 8.0.0-beta.6 => 8.0.0-beta.6 
    @storybook/theming: 8.0.0-beta.6 => 8.0.0-beta.6 
    eslint-plugin-storybook: 0.8.0 => 0.8.0 
    msw-storybook-addon: 2.0.0-beta.1 => 2.0.0-beta.1 
    storybook: 8.0.0-beta.6 => 8.0.0-beta.6 
    storybook-addon-rtl: 1.0.0 => 1.0.0

Additional context

It is related to this issue and it is especially important we are working with next/fonts, see here.