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.