Re-organize Next.js Manual Setup page

[inventarSarah]

SDK

JavaScript SDK

Description

We want to rework the Manual Setup page into the Next.js quick start guide (manual setup).
And ideally, the wizard and manual quick start guides lead to the same results.

However, currently, the manual setup page contains a lot of advanced topics that are not part of the quick start -> we want to move this content to other, more suitable pages

Suggested Solution

identify the information we want to move away from the Manual Setup page and find new homes for them (add to existing pages or create new ones)

consider: does it make sense to create pages under a "Next.js Features" page (see React) and have the next.js-specific information there

[inventarSarah]

I looked at the “Manual Setup” page to identify the content that is different from the wizard installer. At each point I suggested a possible new location for the content.

Extend Configuration

Extend Sentry Webpack Plugin Options

• could not find this anywhere else in the documentation
• can we remove this from the next.js documentation and instead provide it eg with the Webpack plugin documenation?

Create initialization config files

second paragraph below code sample:

"To set up this file, enable the Next.js instrumentation hook by setting the experimental.instrumentationHook to true in your next.config.js."

• I found this PR that added this sentence -> it seems unclear whether this is needed? feat(nextjs): Add information about enable next instrumentation #11140
• found this: https://docs.sentry.io/platforms/javascript/guides/nextjs/migration/v7-to-v8/ This is no longer required for nextjs 15+
• solution:
  • add an expandable for users who work with Next.js < v15 and add the info in there
  • fix link:  experimental.instrumentationHook

Report react component render errors

React Render Errors in App Router

Paragraph below first code sample:

"Note that if you create Next.js error.js files, these files will take precedence ..." + Code example

• not in the wizard; advanced topic
• possible place:
  • Capturing Errors and Events

Errors from Nested React Server Components

content after first code example

"If you need additional logic..."

• not in wizard
• possible place:
  • Next.js Features
    • Capture errors from nested react server components

React Render Errors in Pages Router

• not in wizard
• possible place
  • Next.js Features
    • Custom error page

Instrument Next.js Server Actions

not in wizard

• possible place
  • Next.js Features
    • Instrument server actions

Configure Source maps

Disable Source Maps

• not in wizard
• Possible Place:
  • Source Maps

Use hidden-source-map

Widen the Upload Scope

• this is in the wizard -> but let's shorten this and move the original content to a new place so the info is still accessible
• possible place:
  • Source Maps

Configure Tunneling to avoid Ad-Blockers

• this is in the wizard -> but let's shorten this and move the original content to a new place so the info is still accessible
• there is no dedicated space (?)
  • in options we link to Troubleshooting to learn more about this but we should not use the troubleshooting section for documentation and need to provide the information somewhere else
  • possible place:
    • create a new page for "Tunneling" (eg under Configuration)
      • depends on how important this topic is -> if this is critical it should be on nav level 1

Configure Server-side Auto-instrumentation

Disable API route, middleware and data fetching auto-instrumentation entirely

Opt in to auto-instrumentation on specific routes

Opt out of auto-instrumentation on specific routes

Opt out of auto-instrumentation on middleware

Opt Out of Sentry SDK bundling in Client- or Server-Side

• not in wizard
• possible place:
  • Next.js Features
    • Server-side auto-instrumentation

Instrumentation of Vercel Cron Jobs

• this is in the wizard
• not sure what to do with that one
  • any ideas?

reactComponentAnnotation

• this is in the wizard but not in the manual setup
• -> we should add this
  • something like here: https://docs.sentry.io/platforms/react-native/integrations/component-names/