vite-plugin-storybook-nextjs

3.2.4 verified Sat Apr 25 auth: no javascript

Vite plugin enabling Next.js features in Vite environments, primarily for Storybook portable stories in Vitest. Current stable version 3.2.4, actively maintained by Storybook team. Released monthly with patch and minor updates. Key differentiator: bridges Next.js-specific APIs (image optimization, SWC compilation, routing) with Vite-based testing/Storybook workflows. Supports Next.js 14-16, Storybook 9-10, Vite 5-8. Includes TypeScript types. Based on official Storybook integration.

Common errors

error Cannot find module 'next/router' or its corresponding type declarations ↓

cause Vite environment missing Next.js routing types

fix

Install @types/node and ensure tsconfig.json includes "types": ["node"].

error Module not found: Can't resolve 'next/image' ↓

cause Plugin not properly initialized or Next.js peer dependency missing

fix

Check peer deps: next >=14.1.0. Verify plugin is added to Vite config as next().

Warnings

breaking Vite 8 drops support for vite-tsconfig-paths injection; use Vite's native resolve.tsconfigPaths ↓

fix Enable `resolve.tsconfigPaths: true` in Vite config.

gotcha SVG imports with `?react` query may conflict with vite-plugin-svgr if include/exclude patterns not configured ↓

fix Set `image.exclude: ['**/*.svg?react']` in plugin options.

deprecated Usage with `@storybook/experimental-nextjs-vite` is replaced by direct plugin usage ↓

fix Use `vite-plugin-storybook-nextjs` directly in Vitest config; the experimental package re-exports it.

Install

npm install vite-plugin-storybook-nextjs

yarn add vite-plugin-storybook-nextjs

pnpm add vite-plugin-storybook-nextjs

Imports

default

wrong

import { next } from 'vite-plugin-storybook-nextjs'

correct

import next from 'vite-plugin-storybook-nextjs'

Default export is the plugin function; named export not available.

storybookNextJsPlugin

wrong

import { storybookNextJsPlugin } from 'vite-plugin-storybook-nextjs'

correct

import { storybookNextJsPlugin } from '@storybook/experimental-nextjs-vite/vite-plugin'

Re-exported from the experimental Next.js Vite framework package, not from this plugin directly.

Quickstart

Configures Vitest to use the Next.js plugin, enabling testing of Next.js components in Vite.

// vitest.config.ts
import { defineConfig } from 'vite';
import next from 'vite-plugin-storybook-nextjs';

export default defineConfig({
  plugins: [next()],
});