Repository: getsentry/sentry
Pull request: Wizard only onboarding
~Remix~, SvelteKit, and Nextjs

Someone can validate if these changes, by someone I mean a real developer :D

SvelteKit: local
<img width="1204" alt="image" src="https://github.com/getsentry/sentry/assets/47563310/6f6f8abb-b439-4f64-ab38-328fa8ed25f4">

NextJs: local
<img width="1203" alt="image" src="https://github.com/getsentry/sentry/assets/47563310/ccd6f39c-cd0b-447e-be6d-f71803019735">

~Remix: local~
<img width="1216" alt="image" src="https://github.com/getsentry/sentry/assets/47563310/379815d1-cbdc-49ae-9e39-d8efc40e9211">


closes #55777

EDIT: Remix is still open, waiting on  https://github.com/getsentry/sentry-wizard/issues/433, merging this without remix. Remix change is tracked in #54615 


Problem statement:
Remove manual setup snippets from Next, Remix and Sveltekit getting started pages
### Problem Statement

Currently, we show both, wizard and manual setup in the getting started docs. This is potentially confusing for users as they might think they need to add additional code as to what the wizard already set up.

### Solution Brainstorm

Remove the manual usage code snippets (plus the dynamic Sentry feature button on top since they're no longer useful) 

for:

* [ ] NextJS
* [ ] Remix
* [ ] SvelteKit

Instead, we only link to the manual setup page as an alternative to using the wizard.

### Product Area

Projects - Project Creation

Hints from issue discussion:

Commit message: Wizard only onboarding

Remix, SvelteKit, and Nextjs

Someone can validate if these changes, by someone I mean a real developer :D

Patch to review:
diff --git a/static/app/gettingStartedDocs/javascript/nextjs.spec.tsx b/static/app/gettingStartedDocs/javascript/nextjs.spec.tsx
index b02c62b6a0747e..4a37459c7ca2d5 100644
--- a/static/app/gettingStartedDocs/javascript/nextjs.spec.tsx
+++ b/static/app/gettingStartedDocs/javascript/nextjs.spec.tsx
@@ -1,21 +1,12 @@
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
 import {StepTitle} from 'sentry/components/onboarding/gettingStartedDoc/step';
-import {ProductSolution} from 'sentry/components/onboarding/productSelection';
 
-import {GettingStartedWithNextJs, nextSteps, steps} from './nextjs';
+import {GettingStartedWithNextJs, steps} from './nextjs';
 
 describe('GettingStartedWithNextJs', function () {
-  it('all products are selected', function () {
-    const {container} = render(
-      <GettingStartedWithNextJs
-        dsn="test-dsn"
-        activeProductSelection={[
-          ProductSolution.PERFORMANCE_MONITORING,
-          ProductSolution.SESSION_REPLAY,
-        ]}
-      />
-    );
+  it('renders doc correctly', function () {
+    const {container} = render(<GettingStartedWithNextJs dsn="test-dsn" />);
 
     // Steps
     for (const step of steps()) {
@@ -24,21 +15,6 @@ describe('GettingStartedWithNextJs', function () {
       ).toBeInTheDocument();
     }
 
-    // Next Steps
-    const filteredNextStepsLinks = nextSteps.filter(
-      nextStep =>
-        ![
-          ProductSolution.PERFORMANCE_MONITORING,
-          ProductSolution.SESSION_REPLAY,
-        ].includes(nextStep.id as ProductSolution)
-    );
-
-    for (const filteredNextStepsLink of filteredNextStepsLinks) {
-      expect(
-        screen.getByRole('link', {name: filteredNextStepsLink.name})
-      ).toBeInTheDocument();
-    }
-
     expect(container).toSnapshot();
   });
 });
diff --git a/static/app/gettingStartedDocs/javascript/nextjs.tsx b/static/app/gettingStartedDocs/javascript/nextjs.tsx
index 711a4b650d2743..b2652a3e8c22d4 100644
--- a/static/app/gettingStartedDocs/javascript/nextjs.tsx
+++ b/static/app/gettingStartedDocs/javascript/nextjs.tsx
@@ -6,46 +6,18 @@ import ListItem from 'sentry/components/list/listItem';
 import {Layout, LayoutProps} from 'sentry/components/onboarding/gettingStartedDoc/layout';
 import {ModuleProps} from 'sentry/components/onboarding/gettingStartedDoc/sdkDocumentation';
 import {StepType} from 'sentry/components/onboarding/gettingStartedDoc/step';
-import {ProductSolution} from 'sentry/components/onboarding/productSelection';
 import {t, tct} from 'sentry/locale';
 
-// Configuration Start
-const replayIntegration = `
-new Sentry.Replay(),
-`;
-
-const replayOtherConfig = `
-// Session Replay
-replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
-replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
-`;
-
-const performanceIntegration = `
-new Sentry.BrowserTracing(),
-`;
-
-const performanceOtherConfig = `
-// Performance Monitoring
-tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production!
-`;
-
-export const steps = ({
-  sentryInitContent,
-}: {
-  sentryInitContent?: string;
-} = {}): LayoutProps['steps'] => [
+export const steps = (): LayoutProps['steps'] => [
   {
     type: StepType.INSTALL,
     description: (
       <p>
-        {tct(
-          'Add Sentry automatically to your app with the [wizardLink:Sentry wizard].',
-          {
-            wizardLink: (
-              <ExternalLink href="https://docs.sentry.io/platforms/javascript/guides/nextjs/#install" />
-            ),
-          }
-        )}
+        {tct('Configure your app automatically with the [wizardLink:Sentry wizard].', {
+          wizardLink: (
+            <ExternalLink href="https://docs.sentry.io/platforms/javascript/guides/nextjs/#install" />
+          ),
+        })}
       </p>
     ),
     configurations: [
@@ -59,31 +31,42 @@ export const steps = ({
     type: StepType.CONFIGURE,
     description: (
       <Fragment>
-        {t('The Sentry wizard will automatically patch your application:')}
+        {t(
+          'The Sentry wizard will automatically patch your application to configure the Sentry SDK:'
+        )}
         <List symbol="bullet">
           <ListItem>
             {tct(
-              'Create [sentryClientCode:sentry.client.config.js] and [sentryServerCode:sentry.server.config.js] with the default [sentryInitCode:Sentry.init].',
+              'Create [clientCode:sentry.client.config.js] and [serverCode:sentry.server.config.js] with the default [sentryInitCode:Sentry.init].',
               {
-                sentryClientCode: <code />,
-                sentryServerCode: <code />,
+                clientCode: <code />,
+                serverCode: <code />,
                 sentryInitCode: <code />,
               }
             )}
           </ListItem>
           <ListItem>
-            {tct('Create [code:next.config.js] with the default configuration.', {
-              code: <code />,
-            })}
+            {tct(
+              'create or update your Next.js config [nextConfig:next.confg.js] with the default Sentry configuration',
+              {
+                nextConfig: <code />,
+              }
+            )}
           </ListItem>
           <ListItem>
             {tct(
-              'Create [code:sentry.properties] with configuration for sentry-cli (which is used when automatically uploading source maps).',
+              'Create [sentryClircCode:.sentryclirc] and [sentryPropertiesCode:sentry.properties] files with configuration for sentry-cli (which is used when automatically uploading source maps).',
               {
-                code: <code />,
+                sentryClircCode: <code />,
+                sentryPropertiesCode: <code />,
               }
             )}
           </ListItem>
+          <ListItem>
+            {tct('add an example page to your app to verify your Sentry setup', {
+              sentryClircCode: <code />,
+            })}
+          </ListItem>
         </List>
         <p>
           {tct('Alternatively, you can also [manualSetupLink:set up the SDK manually].', {
@@ -94,123 +77,13 @@ export const steps = ({
         </p>
       </Fragment>
     ),
-    configurations: [
-      {
-        description: (
-          <Fragment>
-            <strong>{t('Configure the Sentry SDK:')}</strong>
-            <p>
-              {tct(
-                'Install Sentry’s Next.js SDK using either [yarnCode:yarn] or [npmCode:npm]:',
-                {
-                  yarnCode: <code />,
-                  npmCode: <code />,
-                }
-              )}
-            </p>
-          </Fragment>
-        ),
-        language: 'bash',
-        code: `
-yarn add @sentry/nextjs
-# or
-npm install --save @sentry/nextjs
-        `,
-      },
-      {
-        language: 'javascript',
-        code: `
-        Sentry.init({
-          ${sentryInitContent}
-        });
-        `,
-      },
-    ],
-  },
-  {
-    type: StepType.VERIFY,
-    description: t(
-      "This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected."
-    ),
-    configurations: [
-      {
-        language: 'javascript',
-        code: `
-        return <button onClick={() => methodDoesNotExist()}>Break the world</button>;
-        `,
-      },
-    ],
   },
 ];
 
-export const nextSteps = [
-  {
-    id: 'source-maps',
-    name: t('Source Maps'),
-    description: t('Learn how to enable readable stack traces in your Sentry errors.'),
-    link: 'https://docs.sentry.io/platforms/javascript/guides/nextjs/sourcemaps/',
-  },
-  {
-    id: 'performance-monitoring',
-    name: t('Performance Monitoring'),
-    description: t(
-      'Track down transactions to connect the dots between 10-second page loads and poor-performing API calls or slow database queries.'
-    ),
-    link: 'https://docs.sentry.io/platforms/javascript/guides/nextjs/performance/',
-  },
-  {
-    id: 'session-replay',
-    name: t('Session Replay'),
-    description: t(
-      'Get to the root cause of an error or latency issue faster by seeing all the technical details related to that issue in one visual replay on your web application.'
-    ),
-    link: 'https://docs.sentry.io/platforms/javascript/guides/nextjs/session-replay/',
-  },
-];
 // Configuration End
 
-export function GettingStartedWithNextJs({
-  dsn,
-  activeProductSelection = [],
-  ...props
-}: ModuleProps) {
-  const integrations: string[] = [];
-  const otherConfigs: string[] = [];
-  let nextStepDocs = [...nextSteps];
-
-  if (activeProductSelection.includes(ProductSolution.PERFORMANCE_MONITORING)) {
-    integrations.push(performanceIntegration.trim());
-    otherConfigs.push(performanceOtherConfig.trim());
-    nextStepDocs = nextStepDocs.filter(
-      step => step.id !== ProductSolution.PERFORMANCE_MONITORING
-    );
-  }
-
-  if (activeProductSelection.includes(ProductSolution.SESSION_REPLAY)) {
-    integrations.push(replayIntegration.trim());
-    otherConfigs.push(replayOtherConfig.trim());
-    nextStepDocs = nextStepDocs.filter(
-      step => step.id !== ProductSolution.SESSION_REPLAY
-    );
-  }
-
-  let sentryInitContent: string[] = [`dsn: "${dsn}",`];
-
-  if (integrations.length > 0) {
-    sentryInitContent = sentryInitContent.concat('integrations: [', integrations, '],');
-  }
-
-  if (otherConfigs.length > 0) {
-    sentryInitContent = sentryInitContent.concat(otherConfigs);
-  }
-
-  return (
-    <Layout
-      steps={steps({sentryInitContent: sentryInitContent.join('\n')})}
-      nextSteps={nextStepDocs}
-      {...props}
-    />
-  );
+export function GettingStartedWithNextJs({dsn, ...props}: ModuleProps) {
+  return <Layout steps={steps()} {...props} />;
 }
 
 export default GettingStartedWithNextJs;
diff --git a/static/app/gettingStartedDocs/javascript/remix.spec.tsx b/static/app/gettingStartedDocs/javascript/remix.spec.tsx
index e9fa4e8cf042c4..263cad57d3abf3 100644
--- a/static/app/gettingStartedDocs/javascript/remix.spec.tsx
+++ b/static/app/gettingStartedDocs/javascript/remix.spec.tsx
@@ -1,21 +1,12 @@
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
 import {StepTitle} from 'sentry/components/onboarding/gettingStartedDoc/step';
-import {ProductSolution} from 'sentry/components/onboarding/productSelection';
 
-import {GettingStartedWithRemix, nextSteps, steps} from './remix';
+import {GettingStartedWithSvelteKit, steps} from './sveltekit';
 
-describe('GettingStartedWithRemix', function () {
-  it('all products are selected', function () {
-    const {container} = render(
-      <GettingStartedWithRemix
-        dsn="test-dsn"
-        activeProductSelection={[
-          ProductSolution.PERFORMANCE_MONITORING,
-          ProductSolution.SESSION_REPLAY,
-        ]}
-      />
-    );
+describe('GettingStartedWithSvelteKit', function () {
+  it('renders doc correctly', function () {
+    const {container} = render(<GettingStartedWithSvelteKit dsn="test-dsn" />);
 
     // Steps
     for (const step of steps()) {
@@ -24,21 +15,6 @@ describe('GettingStartedWithRemix', function () {
       ).toBeInTheDocument();
     }
 
-    // Next Steps
-    const filteredNextStepsLinks = nextSteps.filter(
-      nextStep =>
-        ![
-          ProductSolution.PERFORMANCE_MONITORING,
-          ProductSolution.SESSION_REPLAY,
-        ].includes(nextStep.id as ProductSolution)
-    );
-
-    for (const filteredNextStepsLink of filteredNextStepsLinks) {
-      expect(
-        screen.getByRole('link', {name: filteredNextStepsLink.name})
-      ).toBeInTheDocument();
-    }
-
     expect(container).toSnapshot();
   });
 });
diff --git a/static/app/gettingStartedDocs/javascript/remix.tsx b/static/app/gettingStartedDocs/javascript/remix.tsx
index 455f97f465d44f..a8ad8525637322 100644
--- a/static/app/gettingStartedDocs/javascript/remix.tsx
+++ b/static/app/gettingStartedDocs/javascript/remix.tsx
@@ -1,246 +1,76 @@
+import {Fragment} from 'react';
+
 import ExternalLink from 'sentry/components/links/externalLink';
+import List from 'sentry/components/list/';
+import ListItem from 'sentry/components/list/listItem';
 import {Layout, LayoutProps} from 'sentry/components/onboarding/gettingStartedDoc/layout';
 import {ModuleProps} from 'sentry/components/onboarding/gettingStartedDoc/sdkDocumentation';
 import {StepType} from 'sentry/components/onboarding/gettingStartedDoc/step';
-import {ProductSolution} from 'sentry/components/onboarding/productSelection';
 import {t, tct} from 'sentry/locale';
 
-// Configuration Start
-const replayIntegration = `
-new Sentry.Replay(),
-`;
-
-const replayOtherConfig = `
-// Session Replay
-replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
-replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
-`;
-
-const performanceIntegration = `
-new Sentry.BrowserTracing({
-  // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
-  tracePropagationTargets: ["localhost", /^https:\\/\\/yourserver\\.io\\/api/],
-  routingInstrumentation: Sentry.remixRouterInstrumentation(
-    useEffect,
-    useLocation,
-    useMatches
-  ),
-}),
-`;
-
-const performanceOtherConfig = `
-// Performance Monitoring
-tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production!
-`;
-
-const prismaConfig = `
-new Sentry.Integrations.Prisma({ client: prisma })
-`;
-
-export const steps = ({
-  sentryInitContent,
-  sentryInitContentServer,
-}: {
-  sentryInitContent?: string;
-  sentryInitContentServer?: string[];
-} = {}): LayoutProps['steps'] => [
+export const steps = (): LayoutProps['steps'] => [
   {
     type: StepType.INSTALL,
-    description: t(
-      'Sentry captures data by using an SDK within your application’s runtime.'
+    description: (
+      <p>
+        {tct('Configure your app automatically with the [wizardLink:Sentry wizard].', {
+          wizardLink: (
+            <ExternalLink href="https://docs.sentry.io/platforms/javascript/guides/remix/#install" />
+          ),
+        })}
+      </p>
     ),
     configurations: [
       {
         language: 'bash',
-        code: `
-# Using yarn
-yarn add @sentry/remix
-
-# Using npm
-npm install --save @sentry/remix
-        `,
+        code: `npx @sentry/wizard@latest -i remix`,
       },
     ],
   },
   {
     type: StepType.CONFIGURE,
-    description: t(
-      'Import and initialize Sentry in your Remix entry points for both the client and server:'
-    ),
-    configurations: [
-      {
-        language: 'javascript',
-        code: `
-        import { useLocation, useMatches } from "@remix-run/react";
-        import * as Sentry from "@sentry/remix";
-        import { useEffect } from "react";
-
-        Sentry.init({
-          ${sentryInitContent}
-        });
-        `,
-      },
-      {
-        language: 'javascript',
-        description: (
-          <p>
+    description: (
+      <Fragment>
+        {t(
+          'The Sentry wizard will automatically patch your application to configure the Sentry SDK:'
+        )}
+        <List symbol="bullet">
+          <ListItem>
             {tct(
-              `Initialize Sentry in your entry point for the server to capture exceptions and get performance metrics for your [action] and [loader] functions. You can also initialize Sentry's database integrations, such as Prisma, to get spans for your database calls:`,
+              'Create or update [clientCode:entry.client.tsx] and [serverCode:entry.server.tsx] with the default [sentryInitCode:Sentry.init] call.',
               {
-                action: (
-                  <ExternalLink href="https://remix.run/docs/en/v1/api/conventions#action" />
-                ),
-                loader: (
-                  <ExternalLink href="https://remix.run/docs/en/1.18.1/api/conventions#loader" />
-                ),
+                clientCode: <code />,
+                serverCode: <code />,
+                sentryInitCode: <code />,
               }
             )}
-          </p>
-        ),
-        code: `
-        ${
-          (sentryInitContentServer ?? []).length > 1
-            ? `import { prisma } from "~/db.server";`
-            : ''
-        }
-
-        import * as Sentry from "@sentry/remix";
-
-        Sentry.init({
-          ${sentryInitContentServer?.join('\n')}
-        });
-        `,
-      },
-      {
-        description: t(
-          'Lastly, wrap your Remix root with "withSentry" to catch React component errors and to get parameterized router transactions:'
-        ),
-        language: 'javascript',
-        code: `
-import {
-  Links,
-  LiveReload,
-  Meta,
-  Outlet,
-  Scripts,
-  ScrollRestoration,
-} from "@remix-run/react";
-
-import { withSentry } from "@sentry/remix";
-
-function App() {
-  return (
-    <html>
-      <head>
-        <Meta />
-        <Links />
-      </head>
-      <body>
-        <Outlet />
-        <ScrollRestoration />
-        <Scripts />
-        <LiveReload />
-      </body>
-    </html>
-  );
-}
-
-export default withSentry(App);
-        `,
-      },
-    ],
-  },
-  {
-    type: StepType.VERIFY,
-    description: t(
-      "This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected."
+          </ListItem>
+          <ListItem>
+            {tct(
+              'Create [sentryClircCode:.sentryclirc] and [sentryPropertiesCode:sentry.properties] files with configuration for sentry-cli (which is used when automatically uploading source maps).',
+              {
+                sentryClircCode: <code />,
+                sentryPropertiesCode: <code />,
+              }
+            )}
+          </ListItem>
+        </List>
+        <p>
+          {tct('Alternatively, you can also [manualSetupLink:set up the SDK manually].', {
+            manualSetupLink: (
+              <ExternalLink href="https://docs.sentry.io/platforms/javascript/guides/remix/manual-setup/" />
+            ),
+          })}
+        </p>
+      </Fragment>
     ),
-    configurations: [
-      {
-        language: 'javascript',
-        code: `
-        return <button onClick={() => methodDoesNotExist()}>Break the world</button>;
-        `,
-      },
-    ],
   },
 ];
 
-export const nextSteps = [
-  {
-    id: 'source-maps',
-    name: t('Source Maps'),
-    description: t('Learn how to enable readable stack traces in your Sentry errors.'),
-    link: 'https://docs.sentry.io/platforms/javascript/guides/remix/sourcemaps/',
-  },
-  {
-    id: 'performance-monitoring',
-    name: t('Performance Monitoring'),
-    description: t(
-      'Track down transactions to connect the dots between 10-second page loads and poor-performing API calls or slow database queries.'
-    ),
-    link: 'https://docs.sentry.io/platforms/javascript/guides/remix/performance/',
-  },
-  {
-    id: 'session-replay',
-    name: t('Session Replay'),
-    description: t(
-      'Get to the root cause of an error or latency issue faster by seeing all the technical details related to that issue in one visual replay on your web application.'
-    ),
-    link: 'https://docs.sentry.io/platforms/javascript/guides/remix/session-replay/',
-  },
-];
 // Configuration End
 
-export function GettingStartedWithRemix({
-  dsn,
-  activeProductSelection = [],
-  ...props
-}: ModuleProps) {
-  const integrations: string[] = [];
-  const otherConfigs: string[] = [];
-
-  let nextStepDocs = [...nextSteps];
-  const sentryInitContentServer: string[] = [`dsn: "${dsn}",`];
-
-  if (activeProductSelection.includes(ProductSolution.PERFORMANCE_MONITORING)) {
-    integrations.push(performanceIntegration.trim());
-    otherConfigs.push(performanceOtherConfig.trim());
-    sentryInitContentServer.push(prismaConfig.trim());
-    sentryInitContentServer.push(performanceOtherConfig.trim());
-    nextStepDocs = nextStepDocs.filter(
-      step => step.id !== ProductSolution.PERFORMANCE_MONITORING
-    );
-  }
-
-  if (activeProductSelection.includes(ProductSolution.SESSION_REPLAY)) {
-    integrations.push(replayIntegration.trim());
-    otherConfigs.push(replayOtherConfig.trim());
-    nextStepDocs = nextStepDocs.filter(
-      step => step.id !== ProductSolution.SESSION_REPLAY
-    );
-  }
-
-  let sentryInitContent: string[] = [`dsn: "${dsn}",`];
-
-  if (integrations.length > 0) {
-    sentryInitContent = sentryInitContent.concat('integrations: [', integrations, '],');
-  }
-
-  if (otherConfigs.length > 0) {
-    sentryInitContent = sentryInitContent.concat(otherConfigs);
-  }
-
-  return (
-    <Layout
-      steps={steps({
-        sentryInitContent: sentryInitContent.join('\n'),
-        sentryInitContentServer,
-      })}
-      nextSteps={nextStepDocs}
-      {...props}
-    />
-  );
+export function GettingStartedWithRemix({dsn, ...props}: ModuleProps) {
+  return <Layout steps={steps()} {...props} />;
 }
 
 export default GettingStartedWithRemix;
diff --git a/static/app/gettingStartedDocs/javascript/sveltekit.spec.tsx b/static/app/gettingStartedDocs/javascript/sveltekit.spec.tsx
index c64b8b63c42cfd..263cad57d3abf3 100644
--- a/static/app/gettingStartedDocs/javascript/sveltekit.spec.tsx
+++ b/static/app/gettingStartedDocs/javascript/sveltekit.spec.tsx
@@ -1,21 +1,12 @@
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
 import {StepTitle} from 'sentry/components/onboarding/gettingStartedDoc/step';
-import {ProductSolution} from 'sentry/components/onboarding/productSelection';
 
-import {GettingStartedWithSvelteKit, nextSteps, steps} from './sveltekit';
+import {GettingStartedWithSvelteKit, steps} from './sveltekit';
 
 describe('GettingStartedWithSvelteKit', function () {
-  it('all products are selected', function () {
-    const {container} = render(
-      <GettingStartedWithSvelteKit
-        dsn="test-dsn"
-        activeProductSelection={[
-          ProductSolution.PERFORMANCE_MONITORING,
-          ProductSolution.SESSION_REPLAY,
-        ]}
-      />
-    );
+  it('renders doc correctly', function () {
+    const {container} = render(<GettingStartedWithSvelteKit dsn="test-dsn" />);
 
     // Steps
     for (const step of steps()) {
@@ -24,21 +15,6 @@ describe('GettingStartedWithSvelteKit', function () {
       ).toBeInTheDocument();
     }
 
-    // Next Steps
-    const filteredNextStepsLinks = nextSteps.filter(
-      nextStep =>
-        ![
-          ProductSolution.PERFORMANCE_MONITORING,
-          ProductSolution.SESSION_REPLAY,
-        ].includes(nextStep.id as ProductSolution)
-    );
-
-    for (const filteredNextStepsLink of filteredNextStepsLinks) {
-      expect(
-        screen.getByRole('link', {name: filteredNextStepsLink.name})
-      ).toBeInTheDocument();
-    }
-
     expect(container).toSnapshot();
   });
 });
diff --git a/static/app/gettingStartedDocs/javascript/sveltekit.tsx b/static/app/gettingStartedDocs/javascript/sveltekit.tsx
index c658fed1b87fa4..0237a1f9140dbf 100644
--- a/static/app/gettingStartedDocs/javascript/sveltekit.tsx
+++ b/static/app/gettingStartedDocs/javascript/sveltekit.tsx
@@ -6,30 +6,9 @@ import ListItem from 'sentry/components/list/listItem';
 import {Layout, LayoutProps} from 'sentry/components/onboarding/gettingStartedDoc/layout';
 import {ModuleProps} from 'sentry/components/onboarding/gettingStartedDoc/sdkDocumentation';
 import {StepType} from 'sentry/components/onboarding/gettingStartedDoc/step';
-import {ProductSolution} from 'sentry/components/onboarding/productSelection';
 import {t, tct} from 'sentry/locale';
 
-// Configuration Start
-const replayIntegration = `
-new Sentry.Replay(),
-`;
-
-const replayOtherConfig = `
-// Session Replay
-replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
-replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
-`;
-
-const performanceOtherConfig = `
-// Performance Monitoring
-tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production!
-`;
-
-export const steps = ({
-  sentryInitContent,
-}: {
-  sentryInitContent?: string;
-} = {}): LayoutProps['steps'] => [
+export const steps = (): LayoutProps['steps'] => [
   {
     type: StepType.INSTALL,
     description: (
@@ -93,114 +72,13 @@ export const steps = ({
         </p>
       </Fragment>
     ),
-    configurations: [
-      {
-        description: (
-          <Fragment>
-            <strong>{t('Configure the Sentry SDK:')}</strong>
-            <p>
-              {tct(
-                'To configure the Sentry SDK, edit the [sentryInitCode:Sentry.init] options in [hooksCode:hooks.(client|server).(js|ts)]:',
-                {hooksCode: <code />, sentryInitCode: <code />}
-              )}
-            </p>
-          </Fragment>
-        ),
-        language: 'javascript',
-        code: `
-        import * as Sentry from "@sentry/sveltekit";
-
-        Sentry.init({
-          ${sentryInitContent}
-        });
-        `,
-      },
-    ],
-  },
-  {
-    type: StepType.VERIFY,
-    description: t(
-      "This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected."
-    ),
-    configurations: [
-      {
-        language: 'javascript',
-        code: `
-        <!-- +page.svelte -->
-        <button type="button" on:click={unknownFunction}>Break the world</button>
-        `,
-      },
-    ],
   },
 ];
 
-export const nextSteps = [
-  {
-    id: 'source-maps',
-    name: t('Source Maps'),
-    description: t('Learn how to enable readable stack traces in your Sentry errors.'),
-    link: 'https://docs.sentry.io/platforms/javascript/guides/sveltekit/sourcemaps/',
-  },
-  {
-    id: 'performance-monitoring',
-    name: t('Performance Monitoring'),
-    description: t(
-      'Track down transactions to connect the dots between 10-second page loads and poor-performing API calls or slow database queries.'
-    ),
-    link: 'https://docs.sentry.io/platforms/javascript/guides/sveltekit/performance/',
-  },
-  {
-    id: 'session-replay',
-    name: t('Session Replay'),
-    description: t(
-      'Get to the root cause of an error or latency issue faster by seeing all the technical details related to that issue in one visual replay on your web application.'
-    ),
-    link: 'https://docs.sentry.io/platforms/javascript/guides/sveltekit/session-replay/',
-  },
-];
 // Configuration End
 
-export function GettingStartedWithSvelteKit({
-  dsn,
-  activeProductSelection = [],
-  ...props
-}: ModuleProps) {
-  const integrations: string[] = [];
-  const otherConfigs: string[] = [];
-  let nextStepDocs = [...nextSteps];
-
-  if (activeProductSelection.includes(ProductSolution.PERFORMANCE_MONITORING)) {
-    otherConfigs.push(performanceOtherConfig.trim());
-    nextStepDocs = nextStepDocs.filter(
-      step => step.id !== ProductSolution.PERFORMANCE_MONITORING
-    );
-  }
-
-  if (activeProductSelection.includes(ProductSolution.SESSION_REPLAY)) {
-    integrations.push(replayIntegration.trim());
-    otherConfigs.push(replayOtherConfig.trim());
-    nextStepDocs = nextStepDocs.filter(
-      step => step.id !== ProductSolution.SESSION_REPLAY
-    );
-  }
-
-  let sentryInitContent: string[] = [`dsn: "${dsn}",`];
-
-  if (integrations.length > 0) {
-    sentryInitContent = sentryInitContent.concat('integrations: [', integrations, '],');
-  }
-
-  if (otherConfigs.length > 0) {
-    sentryInitContent = sentryInitContent.concat(otherConfigs);
-  }
-
-  return (
-    <Layout
-      steps={steps({sentryInitContent: sentryInitContent.join('\n')})}
-      nextSteps={nextStepDocs}
-      {...props}
-    />
-  );
+export function GettingStartedWithSvelteKit({dsn, ...props}: ModuleProps) {
+  return <Layout steps={steps()} {...props} />;
 }
 
 export default GettingStartedWithSvelteKit;


Code review comments:
diff_hunk: @@ -59,31 +31,42 @@ export const steps = ({
     type: StepType.CONFIGURE,
     description: (
       <Fragment>
-        {t('The Sentry wizard will automatically patch your application:')}
+        {t(
+          'The Sentry wizard will automatically patch your application to configure the Sentry SDK:'
+        )}
         <List symbol="bullet">
           <ListItem>
             {tct(
-              'Create [sentryClientCode:sentry.client.config.js] and [sentryServerCode:sentry.server.config.js] with the default [sentryInitCode:Sentry.init].',
+              'Create [clientCode:sentry.client.config.js] and [serverCode:sentry.server.config.js] with the default [sentryInitCode:Sentry.init].',
               {
-                sentryClientCode: <code />,
-                sentryServerCode: <code />,
+                clientCode: <code />,
+                serverCode: <code />,
                 sentryInitCode: <code />,
               }
             )}
           </ListItem>
           <ListItem>
-            {tct('Create [code:next.config.js] with the default configuration.', {
-              code: <code />,
-            })}
+            {tct(
+              'create or update your Next.js config [nextConfig:next.confg.js] with the default Sentry configuration',
path: static/app/gettingStartedDocs/javascript/nextjs.tsx
text: @user1:
```suggestion
              'Create or update your Next.js config [nextConfig:next.confg.js] with the default Sentry configuration',
```

diff_hunk: @@ -1,21 +1,12 @@
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
 import {StepTitle} from 'sentry/components/onboarding/gettingStartedDoc/step';
-import {ProductSolution} from 'sentry/components/onboarding/productSelection';
 
-import {GettingStartedWithRemix, nextSteps, steps} from './remix';
+import {GettingStartedWithSvelteKit, steps} from './sveltekit';
path: static/app/gettingStartedDocs/javascript/remix.spec.tsx
text: @user1:
Copy-🍝
```suggestion
import {GettingStartedWithRemix, steps} from './remix';
```