docs(nextjs): added tree-shaking webpack config guide

docs/platforms/javascript/common/configuration/tree-shaking.mdx

@@ -75,35 +75,6 @@ For more details, see the documentation for the specific bundler plugin you're u
 
 </PlatformSection>
 
-<PlatformSection supported={["javascript.nextjs"]}>
-
-### Tree Shaking With Next.js
-
-To tree shake Sentry debug code in Next.js projects, use webpack's [DefinePlugin](https://webpack.js.org/plugins/define-plugin/) in your Next.js configuration like in the example below:
-
-```javascript {filename:next.config.(js|mjs)}
-const nextConfig = {
-  webpack: (config, { webpack }) => {
-    config.plugins.push(
-      new webpack.DefinePlugin({
-        __SENTRY_DEBUG__: false,
-        __SENTRY_TRACING__: false,
-        __RRWEB_EXCLUDE_IFRAME__: true,
-        __RRWEB_EXCLUDE_SHADOW_DOM__: true,
-        __SENTRY_EXCLUDE_REPLAY_WORKER__: true,
-      })
-    );
-
-    // return the modified config
-    return config;
-  },
-};
-```
-
-For more information on custom webpack configurations in Next.js, see [Custom Webpack Config](https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config) in the Next.js docs.
-
-</PlatformSection>
-
 ### Manual Tree Shaking
 
 If you want to tree shake optional code, remove the code from your build output by replacing various flags in the Sentry SDK. Note that if you already configured tree shaking via the Sentry Bundler Plugins, you do not need to do this manually - the plugins will take care of it for you.
@@ -120,9 +91,9 @@ Replacing this flag with `false` will tree shake any SDK code that's related to
 
 <Alert>
   `__SENTRY_TRACING__` must not be replaced with `false` when you're using any
-  tracing-related SDK features (for example,`Sentry.startSpan()`). This
-  flag is intended to be used in combination with packages like `@sentry/next`
-  or `@sentry/sveltekit`, which automatically include the tracing functionality.
+  tracing-related SDK features (for example,`Sentry.startSpan()`). This flag is
+  intended to be used in combination with packages like `@sentry/next` or
+  `@sentry/sveltekit`, which automatically include the tracing functionality.
 </Alert>
 
 <PlatformCategorySection supported={["browser"]}>

docs/platforms/javascript/guides/nextjs/configuration/build/index.mdx

@@ -314,3 +314,9 @@ Enables React component name tracking. When enabled, it annotates React componen
 A list of React component names to exclude from component annotation.
 
 </SdkOption>
+
+<SdkOption name="webpack.treeshake" type="object">
+
+Configuration options for tree shaking. Refer to the [tree shaking documentation](/platforms/javascript/guides/nextjs/configuration/tree-shaking) for more details.
+
+</SdkOption>

docs/platforms/javascript/guides/nextjs/configuration/tree-shaking.mdx

@@ -0,0 +1,96 @@
+---
+title: Tree Shaking
+sidebar_order: 70
+description: "Learn how to reduce Sentry bundle size by tree shaking unused code."
+keywords: ["bundle size", "webpack", "Next.js", "debug"]
+---
+
+The Sentry Next.js SDK supports [tree shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking) for webpack builds with some additional configurations.
+
+If you want to minimize the bundle size of the Sentry SDK, we recommend reading through this page and applying the tree-shaking configurations shown.
+
+<Alert>
+
+This guide is only relevant if you're using webpack to build your Next.js application. Tree-shaking options are not supported for Turbopack builds at the moment.
+
+</Alert>
+
+## Tree-Shaking Optional Code
+
+The Sentry Next.js SDK includes code that isn't strictly required for basic error collection, such as debug logging and tracing functionality. While debug code is useful during development, it adds unnecessary weight to your production bundles. The Next.js SDK provides tree shaking options through the `withSentryConfig` function, allowing you to remove this optional code during the webpack build process.
+
+<Alert>
+  Anything you don't import or use can be tree shaken by webpack. This means
+  that optional integrations like Session Replay, Browser Tracing, Browser
+  Profiling, and any unused utility methods won't be included in your bundle
+  unless you import and use them. The rest of this page covers ways to tree
+  shake internal SDK code, which you only need if you're using certain Sentry
+  features.
+</Alert>
+
+## Tree-Shaking Options
+
+To tree shake Sentry debug code in Next.js projects, use `webpack.treeshake` options in your build configuration, like in this example:
+
+```javascript {filename:next.config.(js|mjs)}
+const nextConfig = {
+  // your next.js config
+};
+
+withSentryConfig(nextConfig, {
+  webpack: {
+    treeshake: {
+      // Tree shaking options...
+      removeDebugLogging: false,
+      removeTracing: false,
+      excludeReplayIframe: false,
+      excludeReplayShadowDOM: false,
+      excludeReplayCompressionWorker: false,
+    },
+  },
+});
+```
+
+For more information on custom webpack configurations in Next.js, see [Custom Webpack Config](https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config) in the Next.js docs.
+
+The following sections cover each available tree-shaking option and how to configure them.
+
+<SdkOption name="webpack.treeshake.removeDebugLogging" type="boolean" defaultValue="false">
+
+Setting this option to true will remove all Sentry SDK debug logging code (the console logs that appear when you set `debug: true` in your SDK configuration). This doesn't affect Sentry's Logs product (controlled by the `enableLogs` option) or your app's logging.
+
+</SdkOption>
+
+<SdkOption name="webpack.treeshake.removeTracing" type="boolean" defaultValue="false">
+
+Setting this option to `true` will remove all code related to tracing and performance monitoring.
+
+<Alert>
+  You should not use any tracing-related SDK features (for example,
+  `Sentry.startSpan()`) when this option is enabled, also this option has no
+  effect if you did not add `browserTracingIntegration`.
+</Alert>
+
+</SdkOption>
+
+<SdkOption name="webpack.treeshake.excludeReplayIframe" type="boolean" defaultValue="false">
+
+Setting this option to `true` will remove any SDK code related to capturing iframe content during [Session Replays](/platforms/javascript/session-replay/). This only applies when you've enabled `replayIntegration`.
+
+</SdkOption>
+
+<SdkOption name="webpack.treeshake.excludeReplayShadowDOM" type="boolean" defaultValue="false">
+
+Setting this option to `true` will remove any SDK code related to capturing shadow DOM elements during [Session Replays](/platforms/javascript/session-replay/). This only applies when you've enabled `replayIntegration`.
+
+</SdkOption>
+
+<SdkOption name="webpack.treeshake.excludeReplayCompressionWorker" type="boolean" defaultValue="false">
+
+Setting this option to `true` will remove any SDK code related to the included compression web worker for [Session Replay](/platforms/javascript/session-replay/). Enable this option if you want to host a compression worker yourself. See [Using a Custom Compression Worker](/platforms/javascript/session-replay/configuration/#using-a-custom-compression-worker) for details. This only applies when you've enabled `replayIntegration`.
+
+**We don't recommend enabling this option unless you provide a custom worker URL**.
+
+</SdkOption>
+
+If you want to learn more about the available tree-shaking options and how to set them manually with different bundlers, see the [tree shaking documentation](/platforms/javascript/guides/react/configuration/tree-shaking/#tree-shaking-with-webpack) for the JavaScript SDK.