feat(nextjs): Add Next.js docs (#3319)

Author: iker-barriocanal

src/includes/getting-started-config/javascript.nextjs.mdx

@@ -0,0 +1,14 @@
+```Npx
+npx @sentry/wizard -i nextjs
+```
+
+<Note>
+
+The call to the [Sentry Wizard](https://github.com/getsentry/sentry-wizard) will automatically patch your project with the necessary configuration, though you can [setup manually](/platforms/javascript/guides/nextjs/manual-setup/) if you prefer.
+It will perform the following changes:
+
+- create `sentry.client.config.js` and `sentry.server.config.js` with the default `Sentry.init` (if those files already exist, it will create `_sentry.client.config.js` and `_sentry.server.config.js` instead).
+- create `next.config.js` with the default configuration (if it already exists it will create `_next.config.js` instead, which will need to be merged with the existing file manually).
+- create `sentry.properties` with Sentry’s project-specific data (used when uploading source maps).
+
+</Note>

src/includes/getting-started-install/javascript.nextjs.mdx

@@ -0,0 +1,7 @@
+```npm
+npm install --save @sentry/nextjs
+```
+
+```yarn
+yarn add @sentry/nextjs
+```

src/includes/getting-started-primer/javascript.nextjs.mdx

@@ -0,0 +1,20 @@
+<Note>
+
+_Sentry's Next.js SDK enables automatic reporting of errors and exceptions._
+
+</Note>
+
+Features:
+
+- Automatic [Error Tracking](/product/issues/) with source maps for both JavaScript and TypeScript
+- Events [enriched](/platforms/javascript/enriching-events/context/) with device data
+- [Breadcrumbs](/platforms/javascript/enriching-events/breadcrumbs/) created for outgoing HTTP request with XHR and Fetch, and console logs
+- [Release Health](/product/releases/health/) for tracking crash-free users and sessions
+
+Under the hood the SDK relies on our [React SDK](/platforms/javascript/guides/react/) on the frontend and [Node SDK](/platforms/node) on the backend, which makes all features available in those SDKs also available in this SDK.
+
+<Note>
+
+The SDK relies on the experimental plugin system of Next.js. This restricts the SDK to running on the production server (it runs in the client in both dev and production), and means changes to the plugin system may prevent the SDK from working as expected. We recognize the irony.
+
+</Note>

src/platforms/common/enriching-events/transaction-name.mdx

@@ -9,6 +9,7 @@ supported:
   - native
 notSupported:
   - javascript.cordova
+  - javascript.nextjs
 description: "Learn how to set or override the transaction name to capture the user and gain critical pieces of information that construct a unique identity in Sentry."
 ---
 

src/platforms/common/performance/index.mdx

@@ -16,6 +16,7 @@ supported:
   - unity
 notSupported:
   - javascript.cordova
+  - javascript.nextjs
 description: "Learn how to enable performance monitoring in your app if it is not already set up."
 redirect_from:
   - /platforms/javascript/performance/apm-to-tracing/
@@ -72,7 +73,7 @@ Test out tracing by adding our <PlatformLink to="/performance/included-instrumen
 
 <PlatformSection supported={["dotnet", "go", "java", "android", "ruby"]} notSupported={["javascript", "react-native", "java.spring", "java.spring-boot"]}>
 
-Test out tracing by starting and finishing a transaction, which you *must* do so transactions can be sent to Sentry. Learn how in our <PlatformLink to="/performance/custom-instrumentation/">Custom Instrumentation</PlatformLink> content.
+Test out tracing by starting and finishing a transaction, which you _must_ do so transactions can be sent to Sentry. Learn how in our <PlatformLink to="/performance/custom-instrumentation/">Custom Instrumentation</PlatformLink> content.
 
 </PlatformSection>
 

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

@@ -26,7 +26,7 @@ Most modern JavaScript transpilers support source maps. Below you'll find our re
 - [UglifyJS](tools/uglifyjs/)
 - [SystemJS](tools/systemjs/)
 
-<PlatformSection notSupported={["javascript.angular"]}>
+<PlatformSection notSupported={["javascript.angular", "javascript.nextjs"]}>
 
 We recommend using [Sentry's Webpack plugin](https://github.com/getsentry/sentry-webpack-plugin) to configure source maps and upload them automatically during the build:
 
@@ -134,6 +134,20 @@ From here, you can [upload your source maps](uploading/) to Sentry.
 
 </PlatformSection>
 
+<PlatformSection supported={["javascript.nextjs"]}>
+
+You need to generate an access token for our API. Within your organization's settings, navigate to Developer Settings, [create a new internal integration](/product/integrations/integration-platform/#internal-integrations), and provide a name appropriate to your organization. **Important:** Select **Releases -> Admin** for Permissions.
+
+<Note>
+
+The Releases -> Admin permission is also known as 'project:releases' in other API documentation.
+
+</Note>
+
+You may configure [sentry-cli](/product/cli/configuration/) through its documented mechanisms, or follow the [recommended instructions for webpack](/platforms/javascript/guides/nextjs/sourcemaps/tools/webpack/) for Next.js.
+
+</PlatformSection>
+
 ## Additional Resources
 
 - [Using sentry-cli to Upload Source Maps](/product/cli/releases/#sentry-cli-sourcemaps)

src/platforms/javascript/common/sourcemaps/tools/webpack.mdx

@@ -7,6 +7,8 @@ Webpack is a powerful build tool that resolves, bundles, and compresses your Jav
 
 Sentry provides a convenient [Webpack plugin](https://github.com/getsentry/sentry-webpack-plugin) that configures source maps and uploads them to Sentry during the build. This process is the recommended one for uploading sources to Sentry:
 
+<PlatformSection notSupported={["javascript.nextjs"]}>
+
 ```shell {tabTitle:npm}
 npm install --save-dev @sentry/webpack-plugin
 ```
@@ -15,6 +17,18 @@ npm install --save-dev @sentry/webpack-plugin
 yarn add --dev @sentry/webpack-plugin
 ```
 
+</PlatformSection>
+
+<PlatformSection supported={["javascript.nextjs"]}>
+<Note>
+
+If you’ve installed the Next.js SDK, you don’t have to install the plugin.
+
+</Note>
+</PlatformSection>
+
+<PlatformSection notSupported={["javascript.nextjs"]}>
+
 You may configure [sentry-cli](/product/cli/configuration/) through it's documented mechanisms, or instead simply bind required parameters when initializing the plugin:
 
 ```javascript {filename:webpack.config.js}
@@ -39,6 +53,14 @@ module.exports = {
 };
 ```
 
+</PlatformSection>
+
+<PlatformSection supported={["javascript.nextjs"]}>
+
+You may configure [sentry-cli](/product/cli/configuration/) through its documented mechanisms, or [extend the default usage of webpack](/platforms/javascript/guides/nextjs/manual-setup/manual-config/) of Next.js.
+
+</PlatformSection>
+
 <PlatformSection supported={["javascript.vue"]}>
 
 In Vue 2.x, you should use `vue.config.js` instead of `webpack.config.js`, and use `include: "./dist"` instead of `include: "."`

src/platforms/javascript/guides/nextjs/config.yml

@@ -0,0 +1,8 @@
+title: Next.js
+sdk: sentry.javascript.nextjs
+fallbackPlatform: javascript
+caseStyle: camelCase
+supportLevel: production
+categories:
+  - browser
+  - server

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

@@ -0,0 +1,6 @@
+---
+title: Manual Setup
+description: "Learn more about manual configuration including webpack usage and managing your app's property file."
+---
+
+<PageGrid />

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

@@ -0,0 +1,105 @@
+---
+title: Manual Configuration
+sidebar_order: 1
+description: "Learn about manual configuration of the SDK."
+---
+
+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.
+
+## Set Initialization Config Files
+
+Create two files in the root directory of your project, `sentry.client.config.js` and `sentry.server.config.js`, and include in them your initialization code for the client-side SDK and server-side SDK, respectively.
+
+For the client configuration:
+
+```javascript {filename:sentry.client.config.js}
+import * as Sentry from "@sentry/nextjs";
+
+const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
+
+Sentry.init({
+  dsn: SENTRY_DSN || "___PUBLIC_DSN___",
+  // ...
+  // Note: if you want to override the automatic release value, do not set a
+  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
+  // that it will also get attached to your source maps
+});
+```
+
+And the server configuration:
+
+```javascript {filename:sentry.server.config.js}
+import * as Sentry from "@sentry/nextjs";
+
+const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
+
+Sentry.init({
+  dsn: SENTRY_DSN || "___PUBLIC_DSN___",
+  // ...
+  // Note: if you want to override the automatic release value, do not set a
+  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
+  // that it will also get attached to your source maps
+});
+```
+
+You can include your DSN directly in these two files, or provide it in either of two environment variables, `SENTRY_DSN` or `NEXT_PUBLIC_SENTRY_DSN`.
+
+## Extend Default Webpack Usage for Source Maps
+
+Extend the default Next.js usage of Webpack to generate source maps and upload them to Sentry. Include the following in `next.config.js`:
+
+```javascript {filename:next.config.js}
+// This file sets a custom webpack configuration to use your Next.js app
+// with Sentry.
+// https://nextjs.org/docs/api-reference/next.config.js/introduction
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+const { withSentryConfig } = require("@sentry/nextjs");
+
+const moduleExports = {
+  // your existing module.exports
+};
+
+const SentryWebpackPluginOptions = {
+  // Additional config options for the Sentry Webpack plugin. Keep in mind that
+  // the following options are set automatically, and overriding them is not
+  // recommended:
+  //   release, url, org, project, authToken, configFile, stripPrefix,
+  //   urlPrefix, include, ignore
+  // For all available options, see:
+  // https://github.com/getsentry/sentry-webpack-plugin#options.
+};
+
+// Make sure adding Sentry options is the last code to run before exporting, to
+// ensure that your source maps include changes from all other Webpack plugins
+module.exports = withSentryConfig(moduleExports, SentryWebpackPluginOptions);
+```
+
+Make sure to add the Sentry config last; otherwise, the source maps the plugin receives may not be final.
+
+## Configure sentry-cli
+
+Under the hood, the `SentryWebpackPlugin` uses `sentry-cli`, which can be configured in one of two ways - using a properties file, or with environment variables - both of which are discussed below. For full details, see [the CLI configuration docs](https://docs.sentry.io/product/cli/configuration/). (If you choose to combine the two approaches, the environment variables will take precedence over values set in the properties file.)
+
+### Properties File
+
+You can create a `sentry.properties` file in the base directory of your project. (This is the approach taken by the wizard.) Here is an example:
+
+```properties {filename:sentry.properties}
+defaults.url=https://sentry.io/
+defaults.org=___ORG_SLUG___
+defaults.project=___PROJECT_SLUG___
+auth.token=___TOKEN___
+# cli.executable=../path/to/bin/sentry-cli
+```
+
+### Environment Variables
+
+Alternatively, the cli can be configured using environment variables.
+
+| Property name      | Environment variable |
+| ------------------ | -------------------- |
+| `defaults.url`     | `SENTRY_URL`         |
+| `defaults.org`     | `SENTRY_ORG`         |
+| `defaults.project` | `SENTRY_PROJECT`     |
+| `auth.token`       | `SENTRY_AUTH_TOKEN`  |