Add Next.js framework doc

- Based on
    - https://github.com/storybookjs/storybook/tree/next/code/frameworks/nextjs
    - https://storybook.js.org/blog/integrate-nextjs-and-storybook-automatically/

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

@@ -0,0 +1,16 @@
+```js
+// .storybook/main.js
+export default {
+  // ...
+  framework: {
+    // name: '@storybook/react-webpack5', // 👈 Remove this
+    name: '@storybook/nextjs', // 👈 Add this
+    options: {
+      builder: {
+        // Set useSWC to true if you want to try out the experimental SWC compiler in Next.js >= 14.0.0
+        useSWC: true,
+      },
+    },
+  },
+};
+```

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

@@ -0,0 +1,20 @@
+```ts
+// .storybook/main.ts
+import { StorybookConfig } from '@storybook/nextjs';
+
+const config: StorybookConfig = {
+  // ...
+  framework: {
+    // name: '@storybook/react-webpack5', // 👈 Remove this
+    name: '@storybook/nextjs', // 👈 Add this
+    options: {
+      builder: {
+        // Set useSWC to true if you want to try out the experimental SWC compiler in Next.js >= 14.0.0
+        useSWC: true,
+      },
+    },
+  },
+};
+
+export default config;
+```

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

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

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

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

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

@@ -0,0 +1,16 @@
+```ts
+// SomeComponentThatUsesTheNavigation.stories.ts
+import { Meta, StoryObj } from '@storybook/react';
+
+import SomeComponentThatUsesTheNavigation from './SomeComponentThatUsesTheNavigation';
+
+const meta: Meta<typeof SomeComponentThatUsesTheNavigation> = {
+  component: SomeComponentThatUsesTheNavigation,
+  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
+// SomeComponentThatUsesTheNavigation.stories.js
+import SomeComponentThatUsesTheNavigation from './SomeComponentThatUsesTheNavigation';
+
+export default {
+  component: SomeComponentThatUsesTheNavigation,
+  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
+// SomeComponentThatUsesTheNavigation.stories.ts
+import { Meta, StoryObj } from '@storybook/react';
+
+import SomeComponentThatUsesTheNavigation from './SomeComponentThatUsesTheNavigation';
+
+const meta = {
+  component: SomeComponentThatUsesTheNavigation,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof SomeComponentThatUsesTheNavigation>;
+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
+// SomeComponentThatUsesTheNavigation.stories.ts
+import { Meta, StoryObj } from '@storybook/react';
+
+import SomeComponentThatUsesTheNavigation from './SomeComponentThatUsesTheNavigation';
+
+const meta: Meta<typeof SomeComponentThatUsesTheNavigation> = {
+  component: SomeComponentThatUsesTheNavigation,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof SomeComponentThatUsesTheNavigation>;
+
+// 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-incomplete.js.mdx

@@ -0,0 +1,17 @@
+```js
+// .storybook/preview.js
+
+export default {
+  // ...
+  parameters: {
+    // ...
+    nextjs: {
+      navigation: {
+        push() {
+          // The default implementation that logs the action into the Actions panel is lost
+        },
+      },
+    },
+  },
+};
+```

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

@@ -0,0 +1,20 @@
+```ts
+// .storybook/preview.ts
+import { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  // ...
+  parameters: {
+    // ...
+    nextjs: {
+      navigation: {
+        push() {
+          // The default implementation that logs the action into the Actions panel is lost
+        },
+      },
+    },
+  },
+};
+
+export default preview;
+```

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

@@ -0,0 +1,21 @@
+```js
+// .storybook/preview.js
+
+export default {
+  // ...
+  parameters: {
+    // ...
+    nextjs: {
+      router: {
+        navigation(...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;
+```