Repository files navigation

This is a Vite plugin that allows you to use Next.js features in Vite. It is the basis for@storybook/experimental-nextjs-vite and should be used when running portable stories in Vitest.

• Next.js Integration: Seamlessly integrate Next.js features into your Vite project.
• Storybook Compatibility: Acts as the foundation forthe@storybook/experimental-nextjs-vite framework, enabling you to use Storybook with Next.js in a Vite environment.
• Portable Stories: Ideal for running portable stories in Vitest, ensuring your components are tested in an environment that closely mirrors production.

• Next.js v14.1.0 or higher
• Storybook 9 or higher

Install the plugin using your preferred package manager:

npm install vite-plugin-storybook-nextjs# oryarn add vite-plugin-storybook-nextjs# orpnpm add vite-plugin-storybook-nextjs

To use the plugin, you need to set up Vitest in your project. You can do this by following the instructions in theVitest documentation.

Add the plugin to your Vitest configuration file. This ensures that Vitest is aware of the Next.js features provided by the plugin.

// vitest.config.tsimport{defineConfig}from"vite";importnextjsfrom"vite-plugin-storybook-nextjs";exportdefaultdefineConfig({plugins:[nextjs()],});

If you are using@storybook/experimental-nextjs-vite you don't have to installvite-plugin-storybook-nextjs, since@storybook/experimental-nextjs-vite already re-exports it.

// vitest.config.tsimport{defineConfig}from"vite";import{storybookNextJsPlugin}from"@storybook/experimental-nextjs-vite/vite-plugin";exportdefaultdefineConfig({plugins:[storybookNextJsPlugin()],});

You can configure the plugin using the following options:

typeVitePluginOptions={/**   * Provide the path to your Next.js project directory   *@default process.cwd()   */dir?:string;};

Portable stories are Storybook stories which can be used in external environments, such as Vitest.

This plugin is necessary to run portable stories in Vitest, as it provides the necessary Next.js features to ensure that your components are tested in an environment that closely mirrors production.

The addon@storybook/addon-vitest can be used to automatically transform your stories at Vitest runtime to in-memory test files. This allows you to run your stories in a Vitest environment without needing to manually transform your stories. Please visithttps://storybook.js.org/docs/8.3/writing-tests/test-runner-with-vitest for more information.

You don't need to map your custom font directory in Storybook'sstaticDir configuration. Instead, Vite will automatically serve the files in thepublic directory and provide assets during production builds.

ThesassOptions property innext.config.js is not supported. Please use Vite's configuration options to configure the Sass compiler:

css:{preprocessorOptions:{scss:{quietDeps:true},}},

When testing components that rely on Next.js Server Actions, you need to ensure that your story files areset up to use thejsdom environment in Vitest. This can be done in two ways:

1. To apply it to individual story files, add a special comment at the top of each file:

   //@vitest-environment jsdom

2. To apply it to all tests, adjust your Vitest configuration:

   // vitest.config.tsimport{defineConfig}from"vitest/config";importnextjsfrom"vite-plugin-storybook-nextjs";exportdefaultdefineConfig({plugins:[nextjs()],test:{environment:"jsdom",// 👈 Add this},});

OnlyNext.js in SWC mode is supported. If your project was forced to opt out of Babel for some reason, you will very likely encounter issues with this plugin (e.g., Emotion support in SWC is still lagging behind).

This project is licensed under the MIT License.