From 887b408b9fe409fdad4a4d2523188daf02770636 Mon Sep 17 00:00:00 2001
From: Charly Gomez <charly.gomez@sentry.io>
Date: Wed, 11 Dec 2024 16:22:17 +0100
Subject: [PATCH] docs(nextjs): Add troubleshooting section for nx (#12090)

---
 .../common/troubleshooting/index.mdx          | 52 +++++++++++++++----
 1 file changed, 41 insertions(+), 11 deletions(-)

diff --git a/docs/platforms/javascript/common/troubleshooting/index.mdx b/docs/platforms/javascript/common/troubleshooting/index.mdx
index 9d416643be8d7..fef140d8392ad 100644
--- a/docs/platforms/javascript/common/troubleshooting/index.mdx
+++ b/docs/platforms/javascript/common/troubleshooting/index.mdx
@@ -437,22 +437,22 @@ Learn more about fixing these caching issues in the <PlatformLink to="/sourcemap
 <PlatformSection notSupported={['javascript.nuxt']}>
   <Expandable permalink title="pnpm: Resolving 'import-in-the-middle' external package errors">
 
-  When using pnpm, you might encounter errors related to packages that can't be external, particularly with packages like `import-in-the-middle` and `require-in-the-middle`. These errors typically occur due to pnpm's strict dependency management and hoisting behavior.
+When using pnpm, you might encounter errors related to packages that can't be external, particularly with packages like `import-in-the-middle` and `require-in-the-middle`. These errors typically occur due to pnpm's strict dependency management and hoisting behavior.
 
-  While adding these packages as direct dependencies might remove the warning messages, it often doesn't resolve the underlying functionality issues:
+While adding these packages as direct dependencies might remove the warning messages, it often doesn't resolve the underlying functionality issues:
 
-  ```bash
-  pnpm add import-in-the-middle require-in-the-middle
-  ```
+```bash
+pnpm add import-in-the-middle require-in-the-middle
+```
 
-  As a workaround, create or modify `.npmrc` in your project root:
+As a workaround, create or modify `.npmrc` in your project root:
 
-  ```npmrc
-  shamefully-hoist=true
-  ```
-  <Alert level="warning">
+```npmrc
+shamefully-hoist=true
+```
+<Alert level="warning">
   **Note**: While `shamefully-hoist=true` usually isn't the ideal solution from a dependency management perspective, it's sometimes necessary for compatibility with certain packages that expect Node.js module resolution behavior similar to npm or yarn.
-  </Alert>
+</Alert>
 
 
   </Expandable>
@@ -540,4 +540,34 @@ Learn more about fixing these caching issues in the <PlatformLink to="/sourcemap
   </Expandable>
 </PlatformSection>
 
+<PlatformSection supported={['javascript.nextjs']}>
+  <Expandable permalink title="Using the Sentry Next SDK in a Nx monorepo (using `@nx/next`)">
+    To set up Sentry's Next.js SDK in an Nx monorepo context, consider the following setup:
+
+    ```js {filename:next.config.js}
+      const nextConfig = {
+      // ...
+      };
+
+      const plugins = [
+      // Your plugins excluding withNx
+      ];
+
+      module.exports = async (phase, context) => {
+        let updatedConfig = plugins.reduce((acc, fn) => fn(acc), nextConfig);
+
+        // Apply the async function that `withNx` returns.
+        updatedConfig = await withNx(updatedConfig)(phase, context);
+
+        return updatedConfig;
+      };
+
+      // The Sentry plugin should always be applied last
+      const { withSentryConfig } = require('@sentry/nextjs');
+      module.exports = withSentryConfig(module.exports)
+    ```
+
+  </Expandable>
+</PlatformSection>
+
 If you need additional help, you can [ask on GitHub](https://github.com/getsentry/sentry-javascript/issues/new/choose). Customers on a paid plan may also contact support.