Example app with Storybook

This example shows a default set up of Storybook that includes the same build features as Next (built-in CSS support, module path aliases...).

/!\ This example includes experimental features. Use with-storybook for a simpler but safer example.

Webpack 5/4

Main version uses Webpack 5, but doesn't work.

Use branch "with-webpack-4" for a version that works (but uses Webpack 4).

Local development of @next/plugin-storybook

For development purpose, please use the latest version of @next/plugin-storybook from Next.js canary branch (clone Next, yarn, yarn dev). Then link it using yalc. yarn link will cause issues with Webpack version, while Yalc simulates a local NPM registry and is closer to real install.

# In next.js
cd packages/next-plugin-storybook
yalc publish
cd packages/next
yalc publish
# NOTE: you might also need to link packages/next the same way, in case you have unexpected errors

# In this repository
yalc link @next/plugin-storybook
yalc link next

And do this again on every local update of next-plugin-storybook.

Then, you need to make sure you are using the version of Webpack bundled by Next

# in this repo
cp node_modules/webpack/lib/index.js node_modules/webpack/lib/index.js.backup
cp ./.yalc/next/dist/compiled/webpack/bundle5.js node_modules/webpack/lib/index.js

TODO

We add example usage of Next.js core feature one at a time, and check if the @next/plugin-storybook supports them correctly when we run Storybook. For instance, path aliases, styled JSX, CSS modules... If not, we must improve @next/plugin-storybook with relevant fixes.

Finish update to Webpack 5

This is mostly on Storybook side, Webpack 5 update is not completely stable (see storybookjs/storybook#14044). Currently we need resolutions to have only one version of Webpack and it doesn't seem to be enough.

Stabilizing @next/plugin-storybook

See main issue here: vercel/next.js#19345 See absolute import issue here: storybookjs/storybook#11639

Supporting CSS modules

They don't work out-of-the box, but they can be supported by adding relevant package in @next/plugin-storybook (vercel/next.js#19345 (comment)).

---

TypeScript

As of v6.0, Storybook has built-in TypeScript support, so no configuration is needed. If you want to customize the default configuration, refer to the TypeScript docs.

Deploy your own

Deploy the example using Vercel:

How to use

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example with-storybook with-storybook-app
# or
yarn create next-app --example with-storybook with-storybook-app

Run Storybook

npm run storybook
# or
yarn storybook

Build Static Storybook

npm run build-storybook
# or
yarn build-storybook

You can use Vercel to deploy Storybook. Specify storybook-static as the output directory.