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

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).)