docs(js): Add note for distributed tracing in Next.js 14 App router (#13858)

Author: chargome

docs/platforms/javascript/common/tracing/distributed-tracing/index.mdx

@@ -27,16 +27,6 @@ If you run any JavaScript applications in your distributed system, make sure tha
 
 </Alert>
 
-<PlatformSection supported={["javascript.nextjs"]}>
-
-<Alert>
-
-Pageload to SSR tracing is currently not supported on the App Router with Next.js versions up to and including 14.
-
-</Alert>
-
-</PlatformSection>
-
 ## How to Use Distributed Tracing?
 
 <PlatformContent includePath="distributed-tracing/how-to-use/" />

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

@@ -85,6 +85,8 @@ export default withSentryConfig(nextConfig, {
 });
 ```
 
+<Include name="nextjs-app-router-14-config" />
+
 ### Initialize Sentry Client-Side and Server-Side SDKs
 
 Create three files in your application's root directory:

includes/nextjs-app-router-14-config.mdx

@@ -0,0 +1,16 @@
+<Expandable title="Additional Configuration for App Router on Next.js 14" level="warning">
+In order to enable distributed tracing for App Router on Next.js 14 you need to add or modify the `generateMetadata` function of your root layout:
+```typescript {filename:app/layout.tsx}
+import * as Sentry from '@sentry/nextjs';
+import type { Metadata } from 'next';
+
+export function generateMetadata(): Metadata {
+  return {
+    // ... your existing metadata
+    other: {
+      ...Sentry.getTraceData(),
+    }
+  }
+};
+```
+</Expandable>

platform-includes/distributed-tracing/how-to-use/javascript.nextjs.mdx

@@ -1,5 +1,7 @@
 If you're using the current version of our Next.js SDK, distributed tracing will work out of the box for the client, server, and edge runtimes.
 
+<Include name="nextjs-app-router-14-config" />
+
 For client-side, when you are interacting with other external API systems, you might have to define `tracePropagationTargets` to get around possible [Browser CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) issues.
 
 <Alert>

platform-includes/performance/configure-sample-rate/javascript.nextjs.mdx

@@ -42,4 +42,6 @@ Sentry.init({
   tracesSampleRate: 1.0,
   // ... rest of your config
 });
-```
+```
+
+<Include name="nextjs-app-router-14-config" />