docs(nextjs): Improve Session Replay platform-includes

- Rewrite setup with SplitLayout for better readability
- Add client-side only note in pre-requisites
- Simplify install with skip-to-setup link
- Keep privacy and lazy-loading sections with links

Co-Authored-By: Claude <[email protected]>

Author: sergical

platform-includes/session-replay/install/javascript.nextjs.mdx

@@ -1,5 +1,7 @@
-The Replay integration is already included with the Sentry SDK. We recommend installing the SDK through our installation wizard:
+Session Replay is included with `@sentry/nextjs`. If you haven't installed Sentry yet, run the wizard:
 
 ```bash
 npx @sentry/wizard@latest -i nextjs
 ```
+
+If you already have Sentry installed, skip to [Set Up](#set-up) below.

platform-includes/session-replay/pre-requisites/javascript.nextjs.mdx

@@ -0,0 +1,6 @@
+Session Replay requires `@sentry/nextjs` version `7.27.0` or higher.
+
+<Alert level="info">
+  Session Replay is **client-side only**. Configure it in
+  `instrumentation-client.ts`, not in server or edge config files.
+</Alert>

platform-includes/session-replay/setup/javascript.nextjs.mdx

@@ -1,47 +1,93 @@
-On your client-side NextJS app, add:
+Session Replay is configured in your **client-side** initialization file only.
 
-```javascript {8,12,14-20} {filename:instrumentation-client.ts}
+<SplitLayout>
+
+<SplitSection>
+<SplitSectionText>
+
+#### Add Replay Integration
+
+Add `replayIntegration()` to your client initialization and configure the sample rates.
+
+**Testing tip:** Set `replaysSessionSampleRate: 1.0` during development to capture all sessions.
+
+</SplitSectionText>
+<SplitSectionCode>
+
+```typescript {filename:instrumentation-client.ts}
 import * as Sentry from "@sentry/nextjs";
 
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
 
-  // This sets the sample rate to be 10%. You may want this to be 100% while
-  // in development and sample at a lower rate in production
+  // Capture 10% of all sessions
   replaysSessionSampleRate: 0.1,
 
-  // If the entire session is not sampled, use the below sample rate to sample
-  // sessions when an error occurs.
+  // Capture 100% of sessions with errors
   replaysOnErrorSampleRate: 1.0,
 
-  integrations: [
-    Sentry.replayIntegration({
-      // Additional SDK configuration goes in here, for example:
-      maskAllText: true,
-      blockAllMedia: true,
-    }),
-  ],
+  integrations: [Sentry.replayIntegration()],
 });
 ```
 
-### Verify
+</SplitSectionCode>
+</SplitSection>
+
+<SplitSection>
+<SplitSectionText>
+
+#### Privacy Options
 
-While you're testing, we recommend that you set `replaysSessionSampleRate` to `1.0`. This ensures that every user session will be sent to Sentry.
+By default, Replay masks all text and blocks media. Customize privacy settings based on your needs.
 
-Once testing is complete, **we recommend lowering this value in production**. We still recommend keeping `replaysOnErrorSampleRate` set to `1.0`, so that, whenever possible, every error has an associated replay with additional debugging context.
+See <PlatformLink to="/session-replay/privacy/">Session Replay Privacy</PlatformLink> for all options.
 
-### PII & Privacy Considerations
+</SplitSectionText>
+<SplitSectionCode>
 
-Personally identifiable information (PII), and privacy are important considerations when enabling Session Replay. There are multiple ways in which Sentry helps you avoid collecting PII, including:
+```typescript {filename:instrumentation-client.ts}
+Sentry.replayIntegration({
+  // Text masking (default: true)
+  maskAllText: true,
+
+  // Block images/videos (default: true)
+  blockAllMedia: true,
+
+  // Mask specific inputs
+  maskAllInputs: true,
+}),
+```
 
-- [Masking](/platforms/javascript/session-replay/privacy/#masking), which replaces the text content with something else. (The default behavior being to replace each character with a \*.)
-- Making [Network request, response bodies, and headers](/platforms/javascript/session-replay/privacy/#network-request-and-response-bodies-and-headers) an opt-in feature, because the best way to avoid getting PII into Sentry is by not adding URLs of endpoints that may contain PII.
+</SplitSectionCode>
+</SplitSection>
 
-While we have certain privacy considerations in place, Sentry's Session Replays allow you to set up the [privacy configurations](/platforms/javascript/session-replay/privacy/#privacy-configuration) that work best for your use case. For example, if you're working on a static website that's free of PII or other types of private data, you can opt out of the default text masking and image blocking settings.
-To learn more about session replay privacy, [read our docs.](/platforms/javascript/session-replay/privacy/)
+<SplitSection>
+<SplitSectionText>
 
-### Lazy-loading Replay
+#### Lazy-Loading Replay
 
-Once you've added the integration, Replay will start automatically. If you don't want to start it immediately (lazy-load it), you can use `addIntegration`:
+Load Replay only when needed instead of at startup. Useful for reducing initial bundle size.
+
+</SplitSectionText>
+<SplitSectionCode>
+
+```typescript {filename:instrumentation-client.ts}
+// Don't add replayIntegration to init
+Sentry.init({
+  integrations: [],
+});
+
+// Later, when you want to start recording:
+import("@sentry/nextjs").then((lazyLoadedSentry) => {
+  Sentry.addIntegration(lazyLoadedSentry.replayIntegration());
+});
+```
+
+</SplitSectionCode>
+</SplitSection>
+
+</SplitLayout>
+
+### Verify
 
-<PlatformContent includePath="configuration/integrations/lazy-loading-replay" />
+Open your app, interact with it, then check [**Replays**](https://sentry.io/orgredirect/organizations/:orgslug/replays/) in Sentry to see your session.