official next support

[jantimon]

Right now I am trying to integrate storybook and nextjs.

Although some claimed https://nextra.vercel.app/ would be "the better storybook for next" I would prefer storybook because of the ecosystem and the great community.

This issue has already been addressed in the Storybook FAQ:

https://storybook.js.org/docs/react/workflows/faq#how-do-i-setup-storybook-to-share-webpack-configuration-with-nextjs

You can generally reuse webpack rules by placing them in a file that is require()-ed your next.config.js

In theory this approach will work however Next and Storybook provide solutions for the same topics which will negatively influence each other:

• HotModuleReloading / React Refresh
• JSX/TSX transpiling

This issue has also been addressed in the Storybook Webpack Docs:

https://storybook.js.org/docs/react/configure/webpack#using-your-existing-config

you can replace the loaders from Storybook with the ones from your app's webpack.config.js

Unfortunately that way we will lose the following Storybook features:

• MDX Support
• Storybook CodePreview
• React Code Gen

Describe the solution you'd like

As Next.JS has grown to a very important framework it would be cool to have official support for it.

Are you able to assist to bring the feature to reality?
yes - but I guess this will require a lot of know how of the storybook internals

Additional context

it is possible to get the entire Next.js Webpack Config with the following helper - maybe all it would take is to add the storybook MDX, React Code Gen and SourceLoader features to it:

/**
 * @param {string} context - the nextJS root directory
 */
async function getNextJsWebpackDevelopmentConfig(context) {
  const loadConfig = require("next/dist/next-server/server/config.js").default;
  const getBaseWebpackConfig = require("next/dist/build/webpack-config").default;
  const nextConfig = await loadConfig("phase-development-server", context, null);
  const nextWebpackConfig = await getBaseWebpackConfig(context, {
    dev: true,
    isServer: false,
    config: nextConfig,
    buildId: "development",
    pagesDir: path.resolve(__dirname, "pages"),
    rewrites: {
      beforeFiles: [],
      afterFiles: [],
      fallback: [],
    },
    entrypoints: {},
  });
  return {
    // Use all aliases and base folders from next:
    resolve: nextWebpackConfig.resolve,
    resolveLoader: nextWebpackConfig.resolveLoader,
    context: nextWebpackConfig.context,
    // Use watchIgnores from next:
    watchOptions: nextWebpackConfig.watchOptions,
    // Same sourcemap dev expirience:
    devtool: nextWebpackConfig.devtool,
    // Loaders
    module: nextWebpackConfig.module,
    // Plugins
    plugins: nextWebpackConfig.plugins,
  };
}

[eric-burel]

Storybook + Next.js support is being actively studied, this work have to be done step by step however. Sadly, there is no magical/quickwin. We've tried to load the entire Next.js webpack config with the experimental @next/plugin-storybook plugin, but it did not really get past the experimentation. The problem is that Next.js has a lot of internal magic that has nothing to do with Storybook, so what you'd want instead is supporting only a subset of the same features. It also requires improvements in Next.js so it exposes some parts of its magic.

Many Next.js boilerplate are also working on this subject, they are a good place to start to have at least a first working solution, and then experiment improvements (having a simpler config, supporting some things out of the box, improving mocks etc.),
like Next Right Now (https://github.com/UnlyEd/next-right-now), or Vulcan Next (which I develop, https://github.com/VulcanJS/vulcan-next).

I am closing to avoid bloating the list of issues but feel free to keep the discussion going or to open issues on more specific points. Any input on Storybook + Next.js is more than welcome.

[eric-burel]

Just a note on alternatives to Storybook specific to Next: I would have say "why not" a while ago, but with the recent advance in reusing Stories for testing, I think Storybook has a huge advantage over those technologies. If you just need stories, they are a good fit, if you want to enjoy Storybook vision of "holistic testing" and advanced frontend development, Next.js specific solutions will fall short.

[jantimon]

There is a discussion on the NextJs side: vercel/next.js#30628