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: (