diff --git a/packages/nextjs/src/client/index.ts b/packages/nextjs/src/client/index.ts
index 9b4e9b724f09..8fd55568e70e 100644
--- a/packages/nextjs/src/client/index.ts
+++ b/packages/nextjs/src/client/index.ts
@@ -113,7 +113,17 @@ function addClientIntegrations(options: BrowserOptions): void {
     if (hasTracingEnabled(options)) {
       const defaultBrowserTracingIntegration = new BrowserTracing({
         // eslint-disable-next-line deprecation/deprecation
-        tracingOrigins: [...defaultRequestInstrumentationOptions.tracingOrigins, /^(api\/)/],
+        tracingOrigins:
+          process.env.NODE_ENV === 'development'
+            ? [
+                // Will match any URL that contains "localhost" but not "webpack.hot-update.json" - The webpack dev-server
+                // has cors and it doesn't like extra headers when it's accessed from a different URL.
+                // TODO(v8): Ideally we rework our tracePropagationTargets logic so this hack won't be necessary anymore (see issue #9764)
+                /^(?=.*localhost)(?!.*webpack\.hot-update\.json).*/,
+                /^\/(?!\/)/,
+              ]
+            : // eslint-disable-next-line deprecation/deprecation
+              [...defaultRequestInstrumentationOptions.tracingOrigins, /^(api\/)/],
         routingInstrumentation: nextRouterInstrumentation,
       });