Cant serve static files in NextJs + Storybook

Question

The nextjs docs (https://nextjs.org/docs/basic-features/static-file-serving) state to add image file paths under the public directory.

I have a component that renders an image component and the file renders correctly on my nextjs project but doesn't render inside of storybook. The image file is currently living in public/images/

const renderImage = () => {
    const portraitClassName = cx({
        [styles.imageContainerPortrait]: true,
    });

    return (
        
    );
};

This is my current config file for storybook

webpackFinal: async (config) => {
        config.module.rules.push({
            test: /\.(scss|sass|css)$/,
            use: [
                {
                    loader: "sass-loader",
                    options: {
                        implementation: require("sass"),
                    },
                },
                {
                    loader: "postcss-loader",
                    options: {
                        ident: "postcss",
                        plugins: [tailwindcss, autoprefixer],
                    },
                }
            ],
            include: path.resolve(__dirname, "../"),
        });
        return config;
    }

Is there something missing that would allow me to render images in the same manner as how Nextjs is set up?

user_988061 · Answer

You need to tell storybook where to find your images. In nextjs they stays in public/ so you can just add -s ./public to your script to run storybook:

//package.json
{
"scripts": {
    "start-storybook": "start-storybook -s ./public"
  }
}

Here docs link for reference: https://storybook.js.org/docs/react/configure/images-and-assets#serving-static-files-via-storybook

user_18608669 · Answer

You need to modify the .storybook/preview.js file like this:

import * as NextImage from 'next/image';

const OriginalNextImage = NextImage.default;

Object.defineProperty(NextImage, 'default', {
  configurable: true,
  value: (props) => (
    
  ),
});

Cant serve static files in NextJs + Storybook

2 Answers