Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More β†’
Socket
Sign inDemoInstall
Socket

@storybook/nextjs

Package Overview
Dependencies
Maintainers
30
Versions
814
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@storybook/nextjs

Storybook for Next.js

  • 7.0.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
983K
decreased by-16.98%
Maintainers
30
Weekly downloads
Β 
Created

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

Keywords

FAQs

Package last updated on 31 Mar 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚑️ by Socket Inc