Next.js: Best way to integrate React Storybook

[walleXD]

Hi all,

What's the best way to integrate @arunoda's React Storybook with next? Is it possible? Next.js 2.0 seems to support custom webpack config but how do I approach this?

Thanks in advance

[AugustinLF]

The integration of storybook in my workflow was seamless!

In the .storybook folder, I created a .babelrc file:

    "presets": [
        "es2015",
        "next/babel"
    ],

I had also had to create a webpack.config.js file since I import css files (for global stylesheets) and inline SVG. But if you don't, you probably won't need this.

[arunoda]

Thanks @AugustinLF for helping us.

[firrae]

Sorry for the necro, but is there an example on how to configure this to work? I tried just plugging in the folders I am using and added a simple index file that mimics the one Storybook builds by default and I just get:

React is not defined
ReferenceError: React is not defined
    at Header (http://localhost:6006/static/preview.bundle.js:39602:10)

Any help would be appreciated. I can open another issue if needed, but I figured this was a better thing to do.

[firrae]

Nevermind I guess I just need to import React on each component. I never thought about that because I didn't need to for them to work in Next.

[grundmanise]

@AugustinLF hey, is your /static/ folder working correctly with storybook? I can't make it work - storybook does not see /static/ folder in the root of the project.

[AugustinLF]

@grundmanise Indeed, if you want to be able to use static directories, you need to add some params to the start-storybook command, in my package.json, I have: "storybook": "start-storybook -p 9001 -s ./ -c .storybook". I don't think the -c .storybook is relevant for you, but by adding the root directory to the static -s ./, when you import from /static, it'll be able to look to <rootDir>/static. Let me know if that still doesn't work for you!

[grundmanise]

@AugustinLF thanks! That did the trick!

[kamui]

Using -s ./ for me makes the build recursively copy storybook-static into storybook-static, so you end up with a ton of files being copied until the build process dies.

[chrisjcodes]

I'm using CSS Modules with Next and having some issues. Next is handling the webpack config behind the scenes but I need storybook to also use that config so CSS Modules works properly. Any ideas?

[tomasdev]

@unruffledBeaver what I recommend is using separate projects for your components library (which are on storybook) and your application that integrates them.
This way you'd save the "trying to make storybook read Nextjs webpack configs" at the same time that you're enforcing the independence and reusability of your components.

[hugotox]

@tomasdev that's an interesting approach. How would you setup the actual import of your components from the storybook into the project?

[chrisjcodes]

@tomasdev That works great for our base UI but we typically use storybook on dozens of individual projects with custom UI and having a separate project for UI components for each actual project is not ideal. The solve I'm using is to mimic the next setup for sass/css modules in my storybook config. Also not ideal but more realistic than having multiple projects for one production project

[lthomason]

@unruffledBeaver Not sure if this will help you, but I was having a similar issue where my storybook output was unstyled. I traced it down to needing the same config as the next-sass plugin uses.

Here's my .storybook/webpack.config.js

const path = require("path");

module.exports = (baseConfig, env, defaultConfig) => {
    defaultConfig.module.rules.push({
        test: /\.scss$/,
        use: [
            {
                loader: 'style-loader'
            },
            {
                loader: 'css-loader',
                options: {
                    modules: true,
                    localIdentName: '[local]__[hash:base64:5]',
                }
            },
            {loader:"sass-loader"}
        ],
        include: path.resolve(__dirname, "../"),
    });
    return defaultConfig;
};

The middle part with the options on css-loader, matches the 'cssLoaderOptions' in next.config.js

[aralroca]

Using -s ./ for me makes the build recursively copy storybook-static into storybook-static, so you end up with a ton of files being copied until the build process dies.

@kamui I have exact the same problem... start-storybook works well but in the moment to do the build-storybook is getting in an infinite loop...

[aralroca]

@grundmanise Indeed, if you want to be able to use static directories, you need to add some params to the start-storybook command, in my package.json, I have: "storybook": "start-storybook -p 9001 -s ./ -c .storybook". I don't think the -c .storybook is relevant for you, but by adding the root directory to the static -s ./, when you import from /static, it'll be able to look to <rootDir>/static. Let me know if that still doesn't work for you!

@grundmanise how can I do the same in the building time? Doing "build-storybook": "build-storybook -c .storybook -s ./" is getting an infinite loop copying recursively the storybook-static

[Pushplaybang]

I've looked around and not found a definitive answer here. Is there a standard way to ensure that components that include assets from the static folder, are able to do so when included in a story?

@aralroca @lthomason @kamui any suggestionns?

[etaggus]

Bit of an old thread but since there's no clear answer here, I found the best way was to add a custom express middleware for storybook, by creating a new middleware.js in the .storybook/ directory.

// middleware.js

const express = require('express');
const path = require('path');

module.exports = router => router.use('/static', express.static(path.join(__dirname, '../static')));

(example copied from https://github.com/storybookjs/storybook/issues/4044#issuecomment-414878059)

cc/ @Pushplaybang

[justincy]

I created a gist showing how to configure Storybook when using both TypeScript and CSS Modules in Next.js: https://gist.github.com/justincy/b8805ae2b333ac98d5a3bd9f431e8f70