feat(nextjs) Update quickstart and manual setup

docs/platforms/javascript/guides/nextjs/configuration/build/index.mdx

@@ -16,7 +16,7 @@ keywords:
   ]
 ---
 
-The Sentry Next.js SDK supports automatic code injection and source map upload during your app's build process using the `withSentryConfig` wrapper in your Next.js configuration file (`next.config.js` or `next.config.mjs`). For information on updating the configuration, see [Extend Next.js Configuration](../../manual-setup/#extend-your-nextjs-configuration).
+The Sentry Next.js SDK supports automatic code injection and source map upload during your app's build process using the `withSentryConfig` wrapper in your Next.js configuration file (`next.config.js` or `next.config.mjs`). For information on updating the configuration, see the [Manual Setup guide](/platforms/javascript/guides/nextjs/manual-setup/#configure).
 
 ## Available Options
 

docs/platforms/javascript/guides/nextjs/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: "Next.js"
-description: Learn how to set up and configure Sentry in your Next.js application using the installation wizard, capture your first errors, and view them in Sentry.
+description: Learn how to set up and configure Sentry in your Next.js application using the installation wizard, capture your first errors, logs and traces and view them in Sentry.
 sdk: sentry.javascript.nextjs
 categories:
   - javascript
@@ -17,214 +17,202 @@ categories:
 
 ## Install
 
-<SplitLayout>
-<SplitSection>
-<SplitSectionText>
+Run the Sentry wizard to automatically configure Sentry in your Next.js application:
 
-To install Sentry using the installation wizard, run the command on the right within your project directory.
+```bash
+npx @sentry/wizard@latest -i nextjs
+```
 
-The wizard guides you through the setup process, asking you to enable additional (optional) Sentry features for your application beyond error monitoring.
+<Expandable title="What does the installation wizard do?">
 
-This guide assumes that you enable all features and allow the wizard to create an example page and route. You can add or remove features at any time, but setting them up now will save you the effort of configuring them manually later.
+The wizard will guide you through:
 
-<Expandable title="What does the installation wizard change inside your application?">
+- Selecting or creating your Sentry project
+- Installing the `@sentry/nextjs` package
+- Enabling optional features ([Tracing](/platforms/javascript/guides/nextjs/tracing/), [Session Replay](/platforms/javascript/guides/nextjs/session-replay/), [Logs](/platforms/javascript/guides/nextjs/logs/))
 
-- Creates config files with the default `Sentry.init()` calls for all runtimes (Node.js, Browser, and Edge)
-- Adds a Next.js instrumentation hook to your project (`instrumentation.ts`)
-- Creates or updates your Next.js config with the default Sentry settings
-- Creates error handling components (`global-error.(jsx|tsx)` and `_error.jsx` for the Pages Router) if they don't already exist
-- Creates `.sentryclirc` with an auth token to upload source maps (this file is automatically added to `.gitignore`)
-- Adds an example page and route to your application to help verify your Sentry setup
+It automatically creates and configures the following files:
 
-</Expandable>
+| File                          | Purpose                                                   |
+| ----------------------------- | --------------------------------------------------------- |
+| `instrumentation-client.ts`   | Client-side SDK initialization (browser)                  |
+| `sentry.server.config.ts`     | Server-side SDK initialization (Node.js)                  |
+| `sentry.edge.config.ts`       | Edge runtime SDK initialization                           |
+| `instrumentation.ts`          | Next.js instrumentation hook                              |
+| `next.config.ts`              | Updated with Sentry configuration                         |
+| `global-error.tsx`            | App Router error boundary                                 |
+| `app/sentry-example-page/`    | Example page to test your setup                           |
+| `app/api/sentry-example-api/` | Example API route                                         |
+| `.env.sentry-build-plugin`    | Auth token for source map uploads (added to `.gitignore`) |
 
-</SplitSectionText>
-<SplitSectionCode>
+**Why multiple configuration files?** Next.js runs code in different environments, each requiring separate Sentry initialization:
 
-```bash
-npx @sentry/wizard@latest -i nextjs
-```
+- **Client** (`instrumentation-client.ts`) — Runs in the browser, captures frontend errors, performance, and replay
+- **Server** (`sentry.server.config.ts`) — Runs in Node.js, captures backend errors and API route issues
+- **Edge** (`sentry.edge.config.ts`) — Runs in edge runtimes (middleware, edge API routes)
 
-</SplitSectionCode>
-</SplitSection>
-</SplitLayout>
-
-## Configure
+</Expandable>
 
-If you prefer to configure Sentry manually, here are the configuration files the wizard would create:
+Prefer to set things up yourself? Check out the [Manual Setup](/platforms/javascript/guides/nextjs/manual-setup/) guide.
 
-In addition to capturing errors, you can monitor interactions between multiple services or applications by [enabling tracing](/concepts/key-terms/tracing/). You can also get to the root of an error or performance issue faster, by watching a video-like reproduction of a user session with [session replay](/product/explore/session-replay/web/getting-started/).
+## Verify
 
-Select which Sentry features you'd like to install in addition to Error Monitoring to get the corresponding installation and configuration instructions below.
+Select the features you enabled in the wizard, then work through the checklist to verify everything is working:
 
 <OnboardingOptionButtons
   options={[
     "error-monitoring",
-    "performance",
+    { id: "performance", checked: true },
     "session-replay",
-    "user-feedback",
-    "logs",
+    { id: "logs", checked: true },
   ]}
 />
 
-<PlatformContent includePath="getting-started-features-expandable" />
-
-<SplitLayout>
-<SplitSection>
-<SplitSectionText>
-
-### Client-Side Configuration
-
-The wizard creates a client configuration file that initializes the Sentry SDK in your browser.
-
-The configuration includes your DSN (Data Source Name), which connects your app to your Sentry project, and enables the features you selected during installation.
+<PlatformContent includePath="getting-started-browser-sandbox-warning" />
 
-</SplitSectionText>
-<SplitSectionCode>
+<VerificationChecklist checklistId="nextjs-quickstart">
+<ChecklistItem id="verify-config" label="Verify your configuration">
+The wizard created these files. Check they exist and contain your DSN:
 
-```javascript {tabTitle:Client} {filename:instrumentation-client.(js|ts)}
+```typescript {tabTitle:Client} {filename:instrumentation-client.ts}
 import * as Sentry from "@sentry/nextjs";
 
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
-
-  // Adds request headers and IP for users, for more info visit:
-  // https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options/#sendDefaultPii
-  sendDefaultPii: true,
-
-  integrations: [
-    // ___PRODUCT_OPTION_START___ session-replay
-    // Replay may only be enabled for the client-side
-    Sentry.replayIntegration(),
-    // ___PRODUCT_OPTION_END___ session-replay
-    // ___PRODUCT_OPTION_START___ user-feedback
-    Sentry.feedbackIntegration({
-      // Additional SDK configuration goes in here, for example:
-      colorScheme: "system",
-    }),
-    // ___PRODUCT_OPTION_END___ user-feedback
-  ],
-  // ___PRODUCT_OPTION_START___ logs
-
-  // Enable logs to be sent to Sentry
-  enableLogs: true,
-  // ___PRODUCT_OPTION_END___ logs
-
   // ___PRODUCT_OPTION_START___ performance
-  // Set tracesSampleRate to 1.0 to capture 100%
-  // of transactions for tracing.
-  // We recommend adjusting this value in production
-  // Learn more at
-  // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
   tracesSampleRate: 1.0,
   // ___PRODUCT_OPTION_END___ performance
   // ___PRODUCT_OPTION_START___ session-replay
-  // Capture Replay for 10% of all
-  // plus for 100% of sessions with an error
-  // Learn more at
-  // https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration
   replaysSessionSampleRate: 0.1,
   replaysOnErrorSampleRate: 1.0,
   // ___PRODUCT_OPTION_END___ session-replay
+  // ___PRODUCT_OPTION_START___ logs
+  enableLogs: true,
+  // ___PRODUCT_OPTION_END___ logs
+  integrations: [
+    // ___PRODUCT_OPTION_START___ session-replay
+    Sentry.replayIntegration(),
+    // ___PRODUCT_OPTION_END___ session-replay
+  ],
 });
-
-// ___PRODUCT_OPTION_START___ performance
-export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;
-// ___PRODUCT_OPTION_END___ performance
 ```
 
-</SplitSectionCode>
-</SplitSection>
-
-<SplitSection>
-<SplitSectionText>
-
-### Server-Side Configuration
-
-The wizard also creates a server configuration file for Node.js and Edge runtimes.
-
-For more advanced configuration options or to set up Sentry manually, check out our [manual setup guide](/platforms/javascript/guides/nextjs/manual-setup/).
-
-</SplitSectionText>
-<SplitSectionCode>
-
-```javascript {tabTitle:Server} {filename:sentry.server.config.(js|ts)}
+```typescript {tabTitle:Server} {filename:sentry.server.config.ts}
 import * as Sentry from "@sentry/nextjs";
 
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
-
-  // Adds request headers and IP for users, for more info visit:
-  // https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options/#sendDefaultPii
-  sendDefaultPii: true,
+  // ___PRODUCT_OPTION_START___ performance
+  tracesSampleRate: 1.0,
+  // ___PRODUCT_OPTION_END___ performance
   // ___PRODUCT_OPTION_START___ logs
-
-  // Enable logs to be sent to Sentry
   enableLogs: true,
   // ___PRODUCT_OPTION_END___ logs
+});
+```
+
+```typescript {tabTitle:Edge} {filename:sentry.edge.config.ts}
+import * as Sentry from "@sentry/nextjs";
 
+Sentry.init({
+  dsn: "___PUBLIC_DSN___",
   // ___PRODUCT_OPTION_START___ performance
-  // Set tracesSampleRate to 1.0 to capture 100%
-  // of transactions for tracing.
-  // We recommend adjusting this value in production
-  // Learn more at
-  // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
   tracesSampleRate: 1.0,
   // ___PRODUCT_OPTION_END___ performance
 });
 ```
 
-</SplitSectionCode>
-</SplitSection>
-</SplitLayout>
-
-## Verify Your Setup
-
-<Include name="nextjs-turbopack-warning-expandable.mdx" />
+</ChecklistItem>
+<ChecklistItem id="trigger-error" label="Trigger a test error">
+Visit `/sentry-example-page` in your browser and click the "Throw Sample Error" button.
 
-If you haven't tested your Sentry configuration yet, let's do it now. You can confirm that Sentry is working properly and sending data to your Sentry project by using the example page and route created by the installation wizard:
+If you don't have an example page, add this button to any page:
 
-1. Open the example page `/sentry-example-page` in your browser. For most Next.js applications, this will be at localhost.
-2. Click the "Throw error" button. This triggers two errors:
-
-- a frontend error
-- an error within the API route
-
-Sentry captures both of these errors for you. Additionally, the button click starts a performance trace to measure the time it takes for the API request to complete.
-
-<Alert level="success" title="Tip">
-
-Don't forget to explore the example files' code in your project to understand what's happening after your button click.
-
-</Alert>
+```tsx
+"use client";
+import * as Sentry from "@sentry/nextjs";
 
-### View Captured Data in Sentry
+export function TestButton() {
+  return (
+    <button
+      onClick={() => {
+        throw new Error("Sentry Test Error");
+      }}
+    >
+      Throw Test Error
+    </button>
+  );
+}
+```
 
-Now, head over to your project on [Sentry.io](https://sentry.io) to view the collected data (it takes a couple of moments for the data to appear).
+</ChecklistItem>
+<ChecklistItem
+  id="see-errors"
+  label="See the error in Sentry"
+  description="Open your project's Issues page and find the test error."
+  link="https://sentry.io/orgredirect/organizations/:orgslug/issues/"
+  linkText="Open Issues"
+  docsLink="/platforms/javascript/guides/nextjs/usage/"
+  docsLinkText="Learn more"
+/>
+<ChecklistItem
+  id="see-traces"
+  label="See Traces"
+  description="View the performance trace from clicking the button."
+  link="https://sentry.io/orgredirect/organizations/:orgslug/explore/traces/"
+  linkText="Open Traces"
+  docsLink="/platforms/javascript/guides/nextjs/tracing/"
+  docsLinkText="Learn more"
+  optionId="performance"
+>
+You can also create custom spans to measure specific operations:
+
+```typescript
+await Sentry.startSpan({ name: "my-operation", op: "task" }, async () => {
+  await doSomething();
+});
+```
 
-<PlatformContent includePath="getting-started-browser-sandbox-warning" />
+</ChecklistItem>
+<ChecklistItem
+  id="see-replay"
+  label="See Session Replay"
+  description="Watch a video-like reproduction of the error."
+  link="https://sentry.io/orgredirect/organizations/:orgslug/replays/"
+  linkText="Open Replays"
+  docsLink="/platforms/javascript/guides/nextjs/session-replay/"
+  docsLinkText="Learn more"
+  optionId="session-replay"
+/>
+<ChecklistItem
+  id="see-logs"
+  label="See Logs"
+  description="View the log messages sent during the test."
+  link="https://sentry.io/orgredirect/organizations/:orgslug/explore/logs/"
+  linkText="Open Logs"
+  docsLink="/platforms/javascript/guides/nextjs/logs/"
+  docsLinkText="Learn more"
+  optionId="logs"
+>
+Send structured logs from anywhere in your application:
+
+```typescript
+Sentry.logger.info("User action", { userId: "123" });
+Sentry.logger.warn("Slow response", { duration: 5000 });
+Sentry.logger.error("Operation failed", { reason: "timeout" });
+```
 
-<PlatformContent includePath="getting-started-verify-locate-data" />
+</ChecklistItem>
+</VerificationChecklist>
 
 ## Next Steps
 
-At this point, you should have integrated Sentry into your Next.js application and should already be sending error and performance data to your Sentry project.
-
-Now's a good time to customize your setup and look into more advanced topics.
-Our next recommended steps for you are:
+You've successfully integrated Sentry into your Next.js application! Here's what to explore next:
 
-- Learn about [instrumenting Next.js server actions](/platforms/javascript/guides/nextjs/apis/#server-actions)
-- Learn how to [manually capture errors](/platforms/javascript/guides/nextjs/usage/)
-- Continue to [customize your configuration](/platforms/javascript/guides/nextjs/configuration/)
-- Get familiar with [Sentry's product features](/product) like tracing, insights, and alerts
-- Learn how to [set up Sentry for Vercel's micro frontends](/platforms/javascript/guides/nextjs/best-practices/micro-frontends/)
-- Learn more about our [Vercel integration](/organization/integrations/deployment/vercel/)
-
-<Expandable permalink={false} title="Are you having problems setting up the SDK?">
-
-- If you encountered issues with our installation wizard, try [setting up Sentry manually](/platforms/javascript/guides/nextjs/manual-setup/)
-- [Get support](https://sentry.zendesk.com/hc/en-us/)
-
-</Expandable>
+- [Logs Integrations](/platforms/javascript/guides/nextjs/logs/#integrations) - Connect popular logging libraries like Pino, Winston, and Bunyan
+- [Distributed Tracing](/platforms/javascript/guides/nextjs/tracing/distributed-tracing/) - Trace requests across services and microservices
+- [AI Agent Monitoring](/platforms/javascript/guides/nextjs/tracing/instrumentation/ai-agents-module/) - Monitor AI agents built with Vercel AI SDK, LangChain, and more
+- [Connect GitHub + Seer](/organization/integrations/source-code-mgmt/github/#installing-github) - Enable AI-powered [root cause analysis](/product/ai-in-sentry/seer/) by connecting your GitHub repository
+- [Configuration Options](/platforms/javascript/guides/nextjs/configuration/) - Explore extended SDK configuration options
 
 </StepComponent>