{"id":20683,"library":"vite-plugin-storybook-nextjs","title":"vite-plugin-storybook-nextjs","description":"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.","status":"active","version":"3.2.4","language":"javascript","source_language":"en","source_url":"https://github.com/storybookjs/vite-plugin-storybook-nextjs","tags":["javascript","vite-plugin","nextjs","storybook","vitest","typescript"],"install":[{"cmd":"npm install vite-plugin-storybook-nextjs","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-storybook-nextjs","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-storybook-nextjs","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency: provides Next.js runtime APIs (image, router, etc.)","package":"next","optional":false},{"reason":"Peer dependency: required for Storybook integration and portable stories","package":"storybook","optional":false},{"reason":"Peer dependency: plugin runs in Vite's plugin system","package":"vite","optional":false}],"imports":[{"note":"Default export is the plugin function; named export not available.","wrong":"import { next } from 'vite-plugin-storybook-nextjs'","symbol":"default","correct":"import next from 'vite-plugin-storybook-nextjs'"},{"note":"Re-exported from the experimental Next.js Vite framework package, not from this plugin directly.","wrong":"import { storybookNextJsPlugin } from 'vite-plugin-storybook-nextjs'","symbol":"storybookNextJsPlugin","correct":"import { storybookNextJsPlugin } from '@storybook/experimental-nextjs-vite/vite-plugin'"}],"quickstart":{"code":"// vitest.config.ts\nimport { defineConfig } from 'vite';\nimport next from 'vite-plugin-storybook-nextjs';\n\nexport default defineConfig({\n  plugins: [next()],\n});","lang":"typescript","description":"Configures Vitest to use the Next.js plugin, enabling testing of Next.js components in Vite."},"warnings":[{"fix":"Enable `resolve.tsconfigPaths: true` in Vite config.","message":"Vite 8 drops support for vite-tsconfig-paths injection; use Vite's native resolve.tsconfigPaths","severity":"breaking","affected_versions":">=3.2.3"},{"fix":"Set `image.exclude: ['**/*.svg?react']` in plugin options.","message":"SVG imports with `?react` query may conflict with vite-plugin-svgr if include/exclude patterns not configured","severity":"gotcha","affected_versions":"*"},{"fix":"Use `vite-plugin-storybook-nextjs` directly in Vitest config; the experimental package re-exports it.","message":"Usage with `@storybook/experimental-nextjs-vite` is replaced by direct plugin usage","severity":"deprecated","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Install `@types/node` and ensure `tsconfig.json` includes `\"types\": [\"node\"]`.","cause":"Vite environment missing Next.js routing types","error":"Cannot find module 'next/router' or its corresponding type declarations"},{"fix":"Check peer deps: next >=14.1.0. Verify plugin is added to Vite config as `next()`.","cause":"Plugin not properly initialized or Next.js peer dependency missing","error":"Module not found: Can't resolve 'next/image'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}