@storybook/nextjs

What is @storybook/nextjs?

@storybook/nextjs is a Storybook preset for Next.js applications. It allows developers to build and test UI components in isolation within a Next.js environment. This package integrates Storybook seamlessly with Next.js, providing a powerful toolset for developing, testing, and documenting UI components.

What are @storybook/nextjs's main functionalities?

Component Isolation

Allows developers to create stories for individual components, enabling them to be rendered in isolation. This helps in testing and developing components independently of the application.

import { storiesOf } from '@storybook/react';
import MyComponent from '../components/MyComponent';

storiesOf('MyComponent', module)
  .add('default', () => <MyComponent />)
  .add('with props', () => <MyComponent prop1="value1" prop2="value2" />);

Next.js Routing

Supports Next.js routing in Storybook stories, allowing developers to simulate different routes and test components/pages as they would appear in the actual application.

import { storiesOf } from '@storybook/react';
import { RouterContext } from 'next/dist/shared/lib/router-context';
import MyPage from '../pages/mypage';

storiesOf('MyPage', module)
  .addDecorator((story) => (
    <RouterContext.Provider value={{ pathname: '/mypage', query: {} }}>
      {story()}
    </RouterContext.Provider>
  ))
  .add('default', () => <MyPage />);

Static File Serving

Enables serving static files such as images, stylesheets, and other assets within Storybook, mimicking the Next.js static file serving capabilities.

import { storiesOf } from '@storybook/react';
import ImageComponent from '../components/ImageComponent';

storiesOf('ImageComponent', module)
  .add('default', () => <ImageComponent src="/static/image.png" />);

Other packages similar to @storybook/nextjs

@storybook/react

@storybook/react is a Storybook preset for React applications. It provides similar functionality for building and testing UI components in isolation but does not include specific integrations for Next.js features like routing and static file serving.

next-storybook

next-storybook is another package that integrates Storybook with Next.js. It offers similar functionalities to @storybook/nextjs, such as support for Next.js routing and static file serving, but may have different configuration and setup processes.

react-cosmos

react-cosmos is a tool for developing and testing React components in isolation. While it provides similar component isolation capabilities, it does not offer the same level of integration with Next.js as @storybook/nextjs.

README

Storybook for Next.js

See documentation for installation instructions, usage examples, APIs, and more.

Acknowledgements

This framework borrows heavily from these Storybook addons:

• storybook-addon-next by RyanClementsHax
• storybook-addon-next-router by lifeiscontent

Changelog

8.1.2

• Angular: Fix filtering of workspace config styles - #27108, thanks @valentinpalkovic!
• Next.js: Avoid interfering with the svgr loader - #27198, thanks @seanparmelee!