Merge pull request #25534 from storybookjs/framework-doc-nextjs

Docs: Add Next.js framework doc

docs/snippets/react/nextjs-add-framework.js.mdx

@@ -0,0 +1,8 @@
+```js
+// .storybook/main.js
+export default {
+  // ...
+  // framework: '@storybook/react-webpack5', 👈 Remove this
+  framework: '@storybook/nextjs', // 👈 Add this
+};
+```

docs/snippets/react/nextjs-add-framework.ts.mdx

@@ -0,0 +1,12 @@
+```ts
+// .storybook/main.ts
+import { StorybookConfig } from '@storybook/nextjs';
+
+const config: StorybookConfig = {
+  // ...
+  // framework: '@storybook/react-webpack5', 👈 Remove this
+  framework: '@storybook/nextjs', // 👈 Add this
+};
+
+export default config;
+```

docs/snippets/react/nextjs-app-directory-in-meta.js.mdx

@@ -0,0 +1,13 @@
+```js
+// NavigationBasedComponent.stories.js
+import NavigationBasedComponent from './NavigationBasedComponent';
+
+export default {
+  component: NavigationBasedComponent,
+  parameters: {
+    nextjs: {
+      appDirectory: true, // 👈 Set this
+    },
+  },
+};
+```

docs/snippets/react/nextjs-app-directory-in-meta.ts-4-9.mdx

@@ -0,0 +1,16 @@
+```ts
+// NavigationBasedComponent.stories.ts
+import { Meta, StoryObj } from '@storybook/react';
+
+import NavigationBasedComponent from './NavigationBasedComponent';
+
+const meta = {
+  component: NavigationBasedComponent,
+  parameters: {
+    nextjs: {
+      appDirectory: true, // 👈 Set this
+    },
+  },
+} satisfies Meta<typeof NavigationBasedComponent>;
+export default meta;
+```

docs/snippets/react/nextjs-app-directory-in-meta.ts.mdx

@@ -0,0 +1,16 @@
+```ts
+// NavigationBasedComponent.stories.ts
+import { Meta, StoryObj } from '@storybook/react';
+
+import NavigationBasedComponent from './NavigationBasedComponent';
+
+const meta: Meta<typeof NavigationBasedComponent> = {
+  component: NavigationBasedComponent,
+  parameters: {
+    nextjs: {
+      appDirectory: true, // 👈 Set this
+    },
+  },
+};
+export default meta;
+```

docs/snippets/react/nextjs-app-directory-in-preview.js.mdx

@@ -0,0 +1,13 @@
+```js
+// .storybook/preview.js
+
+export default {
+  // ...
+  parameters: {
+    // ...
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+};
+```

docs/snippets/react/nextjs-app-directory-in-preview.ts.mdx

@@ -0,0 +1,16 @@
+```ts
+// .storybook/preview.ts
+import { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  // ...
+  parameters: {
+    // ...
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+};
+
+export default preview;
+```

docs/snippets/react/nextjs-configure-svgr.js.mdx

@@ -0,0 +1,25 @@
+```js
+// .storybook/main.js
+export default {
+  // ...
+  webpackFinal: async (config) => {
+    config.module = config.module || {};
+    config.module.rules = config.module.rules || [];
+
+    // This modifies the existing image rule to exclude .svg files
+    // since you want to handle those files with @svgr/webpack
+    const imageRule = config.module.rules.find((rule) => rule?.['test']?.test('.svg'));
+    if (imageRule) {
+      imageRule['exclude'] = /\.svg$/;
+    }
+
+    // Configure .svg files to be loaded with @svgr/webpack
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack'],
+    });
+
+    return config;
+  },
+};
+```

docs/snippets/react/nextjs-configure-svgr.ts.mdx

@@ -0,0 +1,29 @@
+```ts
+// .storybook/main.ts
+import { StorybookConfig } from '@storybook/nextjs';
+
+const config: StorybookConfig = {
+  // ...
+  webpackFinal: async (config) => {
+    config.module = config.module || {};
+    config.module.rules = config.module.rules || [];
+
+    // This modifies the existing image rule to exclude .svg files
+    // since you want to handle those files with @svgr/webpack
+    const imageRule = config.module.rules.find((rule) => rule?.['test']?.test('.svg'));
+    if (imageRule) {
+      imageRule['exclude'] = /\.svg$/;
+    }
+
+    // Configure .svg files to be loaded with @svgr/webpack
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack'],
+    });
+
+    return config;
+  },
+};
+
+export default config;
+```

docs/snippets/react/nextjs-image-static-dirs.js.mdx

@@ -0,0 +1,12 @@
+```js
+// .storybook/main.js
+export default {
+  // ...
+  staticDirs: [
+    {
+      from: '../src/components/fonts',
+      to: 'src/components/fonts',
+    },
+  ],
+};
+```

docs/snippets/react/nextjs-image-static-dirs.ts.mdx

@@ -0,0 +1,16 @@
+```ts
+// .storybook/main.ts
+import { StorybookConfig } from '@storybook/nextjs';
+
+const config: StorybookConfig = {
+  // ...
+  staticDirs: [
+    {
+      from: '../src/components/fonts',
+      to: 'src/components/fonts',
+    },
+  ],
+};
+
+export default config;
+```

docs/snippets/react/nextjs-install.npm.js.mdx

@@ -0,0 +1,3 @@
+```shell
+npm install --save-dev @storybook/nextjs
+```

docs/snippets/react/nextjs-install.pnpm.js.mdx

@@ -0,0 +1,3 @@
+```shell
+pnpm install --save-dev @storybook/nextjs
+```

docs/snippets/react/nextjs-install.yarn.js.mdx

@@ -0,0 +1,3 @@
+```shell
+yarn add --dev @storybook/nextjs
+```

docs/snippets/react/nextjs-navigation-override-in-story.js.mdx

@@ -0,0 +1,28 @@
+```js
+// NavigationBasedComponent.stories.js
+import NavigationBasedComponent from './NavigationBasedComponent';
+
+export default {
+  component: NavigationBasedComponent,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+};
+
+// If you have the actions addon,
+// you can interact with the links and see the route change events there
+export const Example = {
+  parameters: {
+    nextjs: {
+      navigation: {
+        pathname: '/profile',
+        query: {
+          user: '1',
+        },
+      },
+    },
+  },
+};
+```

docs/snippets/react/nextjs-navigation-override-in-story.ts-4-9.mdx

@@ -0,0 +1,33 @@
+```ts
+// NavigationBasedComponent.stories.ts
+import { Meta, StoryObj } from '@storybook/react';
+
+import NavigationBasedComponent from './NavigationBasedComponent';
+
+const meta = {
+  component: NavigationBasedComponent,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof NavigationBasedComponent>;
+export default meta;
+
+type Story = StoryObj<typeof Meta>;
+
+// If you have the actions addon,
+// you can interact with the links and see the route change events there
+export const Example: Story = {
+  parameters: {
+    nextjs: {
+      navigation: {
+        pathname: '/profile',
+        query: {
+          user: '1',
+        },
+      },
+    },
+  },
+};
+```

docs/snippets/react/nextjs-navigation-override-in-story.ts.mdx

@@ -0,0 +1,33 @@
+```ts
+// NavigationBasedComponent.stories.ts
+import { Meta, StoryObj } from '@storybook/react';
+
+import NavigationBasedComponent from './NavigationBasedComponent';
+
+const meta: Meta<typeof NavigationBasedComponent> = {
+  component: NavigationBasedComponent,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof NavigationBasedComponent>;
+
+// If you have the actions addon,
+// you can interact with the links and see the route change events there
+export const Example: Story = {
+  parameters: {
+    nextjs: {
+      navigation: {
+        pathname: '/profile',
+        query: {
+          user: '1',
+        },
+      },
+    },
+  },
+};
+```

docs/snippets/react/nextjs-navigation-push-override-in-preview.js.mdx

@@ -0,0 +1,21 @@
+```js
+// .storybook/preview.js
+
+export default {
+  // ...
+  parameters: {
+    // ...
+    nextjs: {
+      navigation: {
+        push(...args) {
+          // Custom logic can go here
+          // This logs to the Actions panel
+          action('nextNavigation.push')(...args);
+          // Return whatever you want here
+          return Promise.resolve(true);
+        },
+      },
+    },
+  },
+};
+```

docs/snippets/react/nextjs-navigation-push-override-in-preview.ts.mdx

@@ -0,0 +1,24 @@
+```ts
+// .storybook/preview.ts
+import { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  // ...
+  parameters: {
+    // ...
+    nextjs: {
+      navigation: {
+        push(...args) {
+          // Custom logic can go here
+          // This logs to the Actions panel
+          action('nextNavigation.push')(...args);
+          // Return whatever you want here
+          return Promise.resolve(true);
+        },
+      },
+    },
+  },
+};
+
+export default preview;
+```

docs/snippets/react/nextjs-navigation-segments-for-use-params-override-in-meta.js.mdx

@@ -0,0 +1,19 @@
+```js
+// NavigationBasedComponent.stories.js
+import NavigationBasedComponent from './NavigationBasedComponent';
+
+export default {
+  component: NavigationBasedComponent,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        segments: [
+          ['slug', 'hello'],
+          ['framework', 'nextjs'],
+        ],
+      },
+    },
+  },
+};
+```

docs/snippets/react/nextjs-navigation-segments-for-use-params-override-in-meta.ts-4-9.mdx

@@ -0,0 +1,22 @@
+```ts
+// NavigationBasedComponent.stories.ts
+import { Meta, StoryObj } from '@storybook/react';
+
+import NavigationBasedComponent from './NavigationBasedComponent';
+
+const meta = {
+  component: NavigationBasedComponent,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        segments: [
+          ['slug', 'hello'],
+          ['framework', 'nextjs'],
+        ],
+      },
+    },
+  },
+} satisfies Meta<typeof NavigationBasedComponent>;
+export default meta;
+```