From 07069427a9a3f805116cdc059c2268120f7d6100 Mon Sep 17 00:00:00 2001 From: Charly Gomez Date: Wed, 9 Sep 2026 17:30:51 +0200 Subject: [PATCH] feat(onboarding): Update Next.js onboarding for SDK v11 State the Next.js 14 minimum in the install step, import withSentryConfig from @sentry/nextjs/config in the profiling next.config snippet since the root export is removed in v11, and drop the stale pre-7.57 tracing note and the redundant browserTracingIntegration from the distributed tracing snippet. Fix React/NextJS naming in the performance onboarding. Refs SDK-1435 Co-Authored-By: Claude Fable 5.1 Claude-Session: https://claude.ai/code/session_012tmtndCp2gfsHQNhQ8hH5i --- .../javascript-nextjs/index.tsx | 56 ++++++++++--------- .../javascript-nextjs/onboarding.spec.tsx | 5 ++ .../javascript-nextjs/onboarding.tsx | 6 ++ .../javascript-nextjs/performance.tsx | 21 ++----- 4 files changed, 45 insertions(+), 43 deletions(-) diff --git a/static/app/gettingStartedDocs/javascript-nextjs/index.tsx b/static/app/gettingStartedDocs/javascript-nextjs/index.tsx index bec949fe6f7a..4e0aead50d34 100644 --- a/static/app/gettingStartedDocs/javascript-nextjs/index.tsx +++ b/static/app/gettingStartedDocs/javascript-nextjs/index.tsx @@ -30,7 +30,7 @@ export const docs: Docs = { { type: 'text', text: tct( - 'In Next.js you can configure document response headers via the headers option in [code:next.config.js]:', + 'In Next.js you can configure document response headers via the headers option in [code:next.config.(js|mjs|ts)]. Import [code:withSentryConfig] from [code:@sentry/nextjs/config]:', { code: , } @@ -42,38 +42,42 @@ export const docs: Docs = { { label: 'ESM', language: 'javascript', - filename: 'next.config.js', + filename: 'next.config.mjs', code: ` - export default withSentryConfig({ - async headers() { - return [{ - source: "/:path*", - headers: [{ - key: "Document-Policy", - value: "js-profiling", - }], - }]; - }, - // ... other Next.js config options - });`, +import { withSentryConfig } from "@sentry/nextjs/config"; + +export default withSentryConfig({ + async headers() { + return [{ + source: "/:path*", + headers: [{ + key: "Document-Policy", + value: "js-profiling", + }], + }]; + }, + // ... other Next.js config options +});`, }, { label: 'CJS', language: 'javascript', filename: 'next.config.js', code: ` - module.exports = withSentryConfig({ - async headers() { - return [{ - source: "/:path*", - headers: [{ - key: "Document-Policy", - value: "js-profiling", - }], - }]; - }, - // ... other Next.js config options - });`, +const { withSentryConfig } = require("@sentry/nextjs/config"); + +module.exports = withSentryConfig({ + async headers() { + return [{ + source: "/:path*", + headers: [{ + key: "Document-Policy", + value: "js-profiling", + }], + }]; + }, + // ... other Next.js config options +});`, }, ], }, diff --git a/static/app/gettingStartedDocs/javascript-nextjs/onboarding.spec.tsx b/static/app/gettingStartedDocs/javascript-nextjs/onboarding.spec.tsx index fe2447db93b0..e44b379f980d 100644 --- a/static/app/gettingStartedDocs/javascript-nextjs/onboarding.spec.tsx +++ b/static/app/gettingStartedDocs/javascript-nextjs/onboarding.spec.tsx @@ -19,6 +19,11 @@ describe('javascript-nextjs onboarding docs', () => { expect( screen.getByText(textWithMarkupMatcher(/npx @sentry\/wizard@latest -i nextjs/)) ).toBeInTheDocument(); + + // States the minimum supported Next.js version + expect( + screen.getByText(textWithMarkupMatcher(/requires Next\.js 14 or later/)) + ).toBeInTheDocument(); }); it('displays the verify instructions', () => { diff --git a/static/app/gettingStartedDocs/javascript-nextjs/onboarding.tsx b/static/app/gettingStartedDocs/javascript-nextjs/onboarding.tsx index 2fdc19140098..af8beee47e88 100644 --- a/static/app/gettingStartedDocs/javascript-nextjs/onboarding.tsx +++ b/static/app/gettingStartedDocs/javascript-nextjs/onboarding.tsx @@ -17,6 +17,12 @@ export const onboarding: OnboardingConfig = { { title: t('Automatic Configuration (Recommended)'), content: [ + { + type: 'text', + text: tct('The Sentry Next.js SDK requires Next.js [code:14] or later.', { + code: , + }), + }, { type: 'text', text: tct( diff --git a/static/app/gettingStartedDocs/javascript-nextjs/performance.tsx b/static/app/gettingStartedDocs/javascript-nextjs/performance.tsx index 0d0a95663e8a..a969d6630423 100644 --- a/static/app/gettingStartedDocs/javascript-nextjs/performance.tsx +++ b/static/app/gettingStartedDocs/javascript-nextjs/performance.tsx @@ -9,7 +9,7 @@ import {getInstallSnippet} from './utils'; export const performance: OnboardingConfig = { introduction: () => t( - "Adding Performance to your React project is simple. Make sure you've got these basics down." + "Adding Performance to your Next.js project is simple. Make sure you've got these basics down." ), install: params => [ { @@ -34,7 +34,7 @@ export const performance: OnboardingConfig = { { type: 'text', text: tct( - 'To configure, set [code:tracesSampleRate] in your config files, [code:sentry.server.config.js], [code:instrumentation-client.(js|ts)], and [code:sentry.edge.config.js]:', + 'To configure, set [code:tracesSampleRate] in your config files, [code:instrumentation-client.(js|ts)], [code:sentry.server.config.(js|ts)], and [code:sentry.edge.config.(js|ts)]:', {code: } ), }, @@ -93,27 +93,14 @@ Sentry.init({ { type: 'code', language: 'javascript', + filename: 'instrumentation-client.(js|ts)', code: ` -// instrumentation-client.(js|ts) Sentry.init({ dsn: "${params.dsn.public}", - integrations: [Sentry.browserTracingIntegration()], tracePropagationTargets: ["localhost", /^https:\\/\\/yourserver\\.io\\/api/] }); `, }, - { - type: 'text', - text: tct( - "If you're using version [code:7.57.x] or below, you'll need to have our [link:tracing feature enabled] in order for distributed tracing to work.", - { - code: , - link: ( - - ), - } - ), - }, ], }, ], @@ -124,7 +111,7 @@ Sentry.init({ { type: 'text', text: tct( - 'Verify that performance monitoring is working correctly with our [link:automatic instrumentation] by simply using your NextJS application.', + 'Verify that performance monitoring is working correctly with our [link:automatic instrumentation] by simply using your Next.js application.', { link: (