diff --git a/docs/builders/webpack.md b/docs/builders/webpack.md
index e0565bbd8a1f..130ac9bd56e1 100644
--- a/docs/builders/webpack.md
+++ b/docs/builders/webpack.md
@@ -128,6 +128,19 @@ Storybook's default Webpack configuration provides support for most project setu
 
 <!-- prettier-ignore-end -->
 
+However, if you're working with a framework that provides a default aliasing configuration (e.g., Next.js, Nuxt) and you want to configure Storybook to use the same aliases, you may not need to install any additional packages. Instead, you can extend the default configuration of Storybook to use the same aliases provided by the framework. For example, to set up an alias for the `@` import path, you can add the following to your `.storybook/main.js|ts` file:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-main-ts-module-resolution-atsign-import.js.mdx',
+    'common/storybook-main-ts-module-resolution-atsign-import.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
 ### Pre-bundled assets do not show in the Storybook UI
 
 As Storybook relies on [esbuild](https://esbuild.github.io/) to build its internal manager, support for bundling assets with the `managerWebpack` will no longer have an impact on the Storybook UI. We recommend removing existing `managerWebpack` configuration elements from your Storybook configuration file and bundling assets other than images or CSS into JavaScript beforehand.
diff --git a/docs/snippets/common/storybook-main-ts-module-resolution-atsign-import.js.mdx b/docs/snippets/common/storybook-main-ts-module-resolution-atsign-import.js.mdx
new file mode 100644
index 000000000000..46550ace3cfb
--- /dev/null
+++ b/docs/snippets/common/storybook-main-ts-module-resolution-atsign-import.js.mdx
@@ -0,0 +1,20 @@
+```js
+// .storybook/main.js
+
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
+
+export default {
+  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  webpackFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        '@': path.resolve(__dirname, '../src'),
+      };
+    }
+    return config;
+  },
+};
+```
diff --git a/docs/snippets/common/storybook-main-ts-module-resolution-atsign-import.ts.mdx b/docs/snippets/common/storybook-main-ts-module-resolution-atsign-import.ts.mdx
new file mode 100644
index 000000000000..2d895baeac19
--- /dev/null
+++ b/docs/snippets/common/storybook-main-ts-module-resolution-atsign-import.ts.mdx
@@ -0,0 +1,22 @@
+```ts
+// .storybook/main.ts
+
+// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  webpackFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        '@': path.resolve(__dirname, '../src'),
+      };
+    }
+    return config;
+  },
+};
+
+export default config;
+```
diff --git a/docs/snippets/common/storybook-main-ts-module-resolution.js.mdx b/docs/snippets/common/storybook-main-ts-module-resolution.js.mdx
index 05b9426a09b4..dea7293b4f81 100644
--- a/docs/snippets/common/storybook-main-ts-module-resolution.js.mdx
+++ b/docs/snippets/common/storybook-main-ts-module-resolution.js.mdx
@@ -8,12 +8,14 @@ export default {
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   webpackFinal: async (config) => {
-    config.resolve.plugins = [
-      ...(config.resolve.plugins || []),
-      new TsconfigPathsPlugin({
-        extensions: config.resolve.extensions,
-      }),
-    ];
+    if (config.resolve) {
+      config.resolve.plugins = [
+        ...(config.resolve.plugins || []),
+        new TsconfigPathsPlugin({
+          extensions: config.resolve.extensions,
+        }),
+      ];
+    }
     return config;
   },
 };
diff --git a/docs/snippets/common/storybook-main-ts-module-resolution.ts.mdx b/docs/snippets/common/storybook-main-ts-module-resolution.ts.mdx
index 0a0b220e7db7..ab865ed2fcdb 100644
--- a/docs/snippets/common/storybook-main-ts-module-resolution.ts.mdx
+++ b/docs/snippets/common/storybook-main-ts-module-resolution.ts.mdx
@@ -10,12 +10,14 @@ const config: StorybookConfig = {
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   webpackFinal: async (config) => {
-    config.resolve.plugins = [
-      ...(config.resolve.plugins || []),
-      new TsconfigPathsPlugin({
-        extensions: config.resolve.extensions,
-      }),
-    ];
+    if (config.resolve) {
+      config.resolve.plugins = [
+        ...(config.resolve.plugins || []),
+        new TsconfigPathsPlugin({
+          extensions: config.resolve.extensions,
+        }),
+      ];
+    }
     return config;
   },
 };