Skip to main content

storybook + next 12 setup

extra config to setup next.js for storybook to run Page in isolation from next integrations - must serve next public dir and deoptimize <Image\>

install deps

npx sb init --builder __webpack5 | vite | webpack4_for_compat

mirror Stories to next /pages dir /stories/pages/home.stories.jsx 

import Home from "../../pages/index"

export default {
  title: "Pages/Home",
  component: Home
} 

export const HomePage = () => <Home /\>

Share next global CSS

add unoptimized attribute to ANY FC with <Image\> to serve deoptimized Image FC compat for storybook

// .storybook/preview.js
import * as NextImage from "next/image";

const OriginalNextImage = NextImage.default;

Object.defineProperty(NextImage, "default", {
  configurable: true,
  value: (props) => <OriginalNextImage {...props} unoptimized /\>,
});

serve public folder to storybook in scripts

"scripts": {
  "storybook": "start-storybook -p 6006 -s ./public",
  "build-storybook": "build-storybook -s public"
}

References​