[Tracking] Vite plugin for Next.js

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation

MIT License

83.94k stars 9.21k forks source link

Milestones

Use this space to document how the project will be split up. At project kickoff, at minimum we should have all the milestones split up, and emphasize which is must-have and which is nice-to-have. As we dig in, flesh out the detailed implementational tasks in each milestone.

### Milestone 1: Feature implementation - [x] Feature: Support SWC transpiler - [x] Feature: Support environment variables - [x] Feature: Support various CSS technologies (Global CSS, CSS Modules, External Stylesheets, Tailwind CSS, Sass, CSS-in-JS) - [x] Feature: next/link - [x] Feature: next/image - [x] Feature: next/font - [x] Feature: next/head - [x] Feature: next/cache - [x] Feature: next/navigation - [x] Feature: next/router - [x] Feature: RSC - [x] Mocks: Storybook mocks for Next.js API's

### Milestone 2: Releasing and Documentation - [x] Testing: Ensure it works in vitest with portable stories - [x] Setup CI and Chromatic on example project - [x] Publish vite-plugin-storybook-nextjs - [ ] https://github.com/storybookjs/storybook/issues/28789 - [x] Documentation - [x] Blog post

Nice to Have

### Milestone 3 (Stretch goals) - [ ] https://github.com/storybookjs/storybook/issues/28799 - [ ] Feature: Fast-refresh - [ ] Ensure Windows compatibility

### Related issues that may be resolved by this project - [x] next/dynamic does not work - [ ] Refresh bug on startup - [x] "Could not find default container" when "waitFor" is used - [ ] [Bug] Chromatic: Invalid hook call

Disclaimer This information might be inaccurate, due to it being generated automatically To implement a Vite plugin for Next.js, follow these steps:

Create a new preset file: Create a new file similar to /code/frameworks/react-vite/src/preset.ts.
Define core properties: Set the builder and renderer properties to the appropriate Vite and Next.js packages.

import { dirname, join } from 'path';
import type { PresetProperty } from 'storybook/internal/types';

const getAbsolutePath = <I extends string>(input: I): I =>
  dirname(require.resolve(join(input, 'package.json'))) as any;

export const core: PresetProperty<'core'> = {
  builder: getAbsolutePath('@storybook/builder-vite'),
  renderer: getAbsolutePath('@storybook/nextjs'),
};

Configure Vite plugins: Add necessary Vite plugins for Next.js in the viteFinal function.

import type { StorybookConfig } from './types';

export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = async (config, options) => {
  const { plugins = [] } = config;

  // Add Next.js specific Vite plugins
  plugins.push(require('@vitejs/plugin-react'));

  return {
    ...config,
    plugins,
  };
};

Refer to the existing presets for React, Svelte, and Vue3 for more details.

References

/code/lib/cli/src/automigrate/fixes/vite-config-file.ts /code/frameworks/react-vite/src/preset.ts /code/frameworks/svelte-vite/src/preset.ts /code/frameworks/sveltekit/src/preset.ts /code/frameworks/vue3-vite/src/preset.ts /code/lib/csf-plugin/src/index.ts

#### About Greptile

This response provides a starting point for your research, not a precise solution. Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. [Ask Greptile](https://app.greptile.com/chat/github/storybookjs/storybook/next) · [Edit Issue Bot Settings](https://app.greptile.com/apps/github)

storybookjs / storybook