feat(nextjs): Add transpileClientSDK option and build config page (#5350)

In getsentry/sentry-javascript#5472, a `transpileClientSDK` option was added to the nextjs SDK to force SDK code to be transpiled along with other app code, primarily for the use of folks wanting to use the SDK in older browsers without support for ES6 or ES6+ features like object spread. This documents that option by:
- Adding a section to the manual setup page (which is where other build-time options live)
- Adding a new 'Build Options' page redirecting people to the relevant section of of the manual setup page, for greater discoverability
- Adding a nextjs-specific include to a new legacy browser support section on the Troubleshooting page. (A generic include has also been added for the non-nextjs JS docs, detailing how to do manually what the added option causes the nextjs SDK to do automatically.)

Author: lobsterkatie

src/includes/troubleshooting/older-browser-support/javascript.mdx

@@ -0,0 +1,50 @@
+For example, if you're using Webpack and Babel, and you have the following code in your `webpack.config.js`, you'll want to modify `exclude` so it doesn't block the SDK.
+
+Before:
+
+```javascript {filename:webpack.config.js}
+module: {
+  rules: [
+    {
+      test: /\.(js)$/,
+      exclude: /node_modules/,
+      use: ['babel-loader']
+    }
+  ]
+},
+```
+
+After:
+
+```javascript {filename:webpack.config.js}
+module: {
+  rules: [
+    {
+      test: /\.(js)$/,
+      // Make sure to include all `@sentry` packages, not just the main SDK package
+      exclude: filepath => filepath.includes("node_modules") && !filepath.includes("@sentry"),
+      use: ['babel-loader']
+    }
+  ]
+},
+```
+
+Though the above example is Webpack-specific, similar changes can be made to configuraton for Rollup, esbuild, and the like.
+
+<PlatformSection notSupported={[
+"javascript.angular",
+"javascript.capacitor",
+"javascript.cordova",
+"javascript.electron",
+"javascript.ember",
+"javascript.gatsby",
+"javascript.nextjs",
+"javascript.react",
+"javascript.remix",
+"javascript.vue",
+"javascript.wasm",
+]}>
+
+As an alternative, you can use one of our ES5-specific <PlatformLink to="/install/cdn/#available-bundles">CDN bundles</PlatformLink>.
+
+</PlatformSection>

src/includes/troubleshooting/older-browser-support/javascript.nextjs.mdx

@@ -0,0 +1,21 @@
+In order to do this, set the `sentry.transpileClientSDK` option in your `next.config.js`:
+
+```javascript {filename:next.config.js}
+const { withSentryConfig } = require("@sentry/nextjs");
+
+const moduleExports = {
+  // < other nextjs config >
+
+  sentry: {
+    transpileClientSDK: true,
+  },
+};
+
+const sentryWebpackPluginOptions = {
+  // < webpack plugin config >
+};
+
+module.exports = withSentryConfig(moduleExports, sentryWebpackPluginOptions);
+```
+
+For more information, please see [Extend Next.js Configuration](../manual-setup/#extend-nextjs-configuration).

src/platforms/javascript/common/troubleshooting/index.mdx

@@ -70,7 +70,7 @@ To fix this, change the `tracingOrigins` option during SDK initialization. For m
 
 ## `instrument.js` Line Numbers for Console Log statements
 
-If `instrument.js` displays in your console while debugging, add Sentry to your [Framework Ignore List](https://developer.chrome.com/docs/devtools/javascript/ignore-chrome-extension-scripts/) by adding this pattern: `/@sentry/` 
+If `instrument.js` displays in your console while debugging, add Sentry to your [Framework Ignore List](https://developer.chrome.com/docs/devtools/javascript/ignore-chrome-extension-scripts/) by adding this pattern: `/@sentry/`
 
 Chrome then ignores the SDK stack frames when debugging.
 
@@ -421,3 +421,9 @@ document.body.addEventListener(
 ```
 
 Remember to pass in `true` as the second parameter to `addEventListener()`. Without it, the event handler won't be called, since it's being added to the event target's ancestor rather than the event target itself, and unlike JavaScript runtime errors, `error` events resulting from load failures don't bubble, and therefore must be captured during the `capture` phase. For more information, see [the W3C spec](https://www.w3.org/TR/2003/NOTE-DOM-Level-3-Events-20031107/events.html#Events-phases).
+
+## Supporting Older Browsers
+
+Starting with version 7.0.0, the Sentry JavaScript SDK uses ES6 syntax, along with a few other ES6+ language features, like object spread. If you are down-compiling your code in order to target older browsers that don't support such syntax, you'll need to include the Sentry SDK in that process.
+
+<PlatformContent includePath="troubleshooting/older-browser-support" />

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

@@ -0,0 +1,19 @@
+---
+title: Build Options
+sidebar_order: 5
+description: "Learn about configuration options used in `next.config.js` to control your app's build process."
+keywords:
+  [
+    "next.js",
+    "nextjs",
+    "next.config",
+    "sourcemaps",
+    "source maps",
+    "build",
+    "compatibility",
+    "ES6",
+    "ES5",
+  ]
+---
+
+The Sentry Next.js SDK supports automatic code injection and source map upload during your app's build process using the `withSentryConfig` wrapper in `next.config.js`. For information on the available configuration options, see [Extend Next.js Configuration](../../manual-setup/#extend-nextjs-configuration).

src/platforms/javascript/guides/nextjs/manual-setup.mdx

@@ -4,7 +4,7 @@ sidebar_order: 1
 description: "Learn how to set up the SDK manually."
 ---
 
-If you can’t (or prefer not to) run the [configuration step](/platforms/javascript/guides/nextjs/#configure), you can follow the instructions below to configure your application.
+If you can't (or prefer not to) run the [configuration step](/platforms/javascript/guides/nextjs/#configure), you can follow the instructions below to configure your application.
 
 ## Create Initialization Config Files
 
@@ -161,6 +161,17 @@ const { withSentryConfig } = require("@sentry/nextjs");
 
 const moduleExports = {
   // your existing module.exports
+
+  // Optional build-time configuration options
+  sentry: {
+    // See the 'Configure Source Maps' and 'Configure Legacy Browser Support'
+    // sections below for information on the following options:
+    //   - disableServerWebpackPlugin
+    //   - disableClientWebpackPlugin
+    //   - hideSourceMaps
+    //   - widenClientFileUpload
+    //   - transpileClientSDK
+  },
 };
 
 const sentryWebpackPluginOptions = {
@@ -287,3 +298,19 @@ Alternatively, the cli can be configured using environment variables.
 | `defaults.org`     | `SENTRY_ORG`         |
 | `defaults.project` | `SENTRY_PROJECT`     |
 | `auth.token`       | `SENTRY_AUTH_TOKEN`  |
+
+## Configure Legacy Browser Support
+
+_(New in version 7.8.0)_
+
+The `@sentry/nextjs` SDK is designed to run in browsers which support ES6 (and certain ES6+ language features like object spread). If you need to support older browsers, and have configured Next.js to down-compile your code, you can apply the same down-compilation to the injected SDK code by using the `transpileClientSDK` option in your `next.config.js`:
+
+```javascript {filename:next.config.js}
+const moduleExports = {
+  sentry: {
+    transpileClientSDK: true,
+  },
+};
+```
+
+(This assumes you are using [the `next.config.js` setup shown above](#extend-nextjs-configuration).)