feat(nextjs): Add Next.js docs

[iker-barriocanal]

Adds Next.js docs.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/sentry/sentry-docs/zN7x4TG9Dg62R1rsExGm2yL7iTdZ
✅ Preview: https://sentry-docs-git-feat-nextjs-docs.sentry.dev

[dcramer]

➜  ~/s/sentry-intercom (main) ✗ npx next build

> Build error occurred
Error: Cannot find module './node_modules/@sentry/next-plugin-sentry/package.json'
Require stack:
- /mnt/c/Users/David/Documents/GitHub/sentry-intercom/next.config.js
- /mnt/c/Users/David/Documents/GitHub/sentry-intercom/node_modules/next/dist/next-server/server/config.js
- /mnt/c/Users/David/Documents/GitHub/sentry-intercom/node_modules/next/dist/build/index.js
- /mnt/c/Users/David/Documents/GitHub/sentry-intercom/node_modules/next/dist/cli/next-build.js
- /mnt/c/Users/David/Documents/GitHub/sentry-intercom/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.mod._resolveFilename (/mnt/c/Users/David/Documents/GitHub/sentry-intercom/node_modules/next/dist/build/webpack/require-hook.js:4:1784)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at syncSentryPluginVersion (/mnt/c/Users/David/Documents/GitHub/sentry-intercom/next.config.js:37:27)
    at Object.<anonymous> (/mnt/c/Users/David/Documents/GitHub/sentry-intercom/next.config.js:45:1)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at loadConfig (/mnt/c/Users/David/Documents/GitHub/sentry-intercom/node_modules/next/dist/next-server/server/config.js:8:94)
    at async Span.traceAsyncFn (/mnt/c/Users/David/Documents/GitHub/sentry-intercom/node_modules/next/dist/telemetry/trace/trace.js:5:584)
    at async /mnt/c/Users/David/Documents/GitHub/sentry-intercom/node_modules/next/dist/build/index.js:2:127 {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/mnt/c/Users/David/Documents/GitHub/sentry-intercom/next.config.js',
    '/mnt/c/Users/David/Documents/GitHub/sentry-intercom/node_modules/next/dist/next-server/server/config.js',
    '/mnt/c/Users/David/Documents/GitHub/sentry-intercom/node_modules/next/dist/build/index.js',
    '/mnt/c/Users/David/Documents/GitHub/sentry-intercom/node_modules/next/dist/cli/next-build.js',
    '/mnt/c/Users/David/Documents/GitHub/sentry-intercom/node_modules/next/dist/bin/next'
  ]
}

Should that be @sentry/nextjs?

[dcramer]

fyi npx sentry-wizard didnt work for me. not sure why, as it did with next.js template builder

[dcramer]

A normal workflow for next would be to use the template builder, or to e.g. npm add next. In both of these, the version ends up being something akin to ^10.1.3. The example config in next.config.js will then set the version as this, which is not a valid version, and is quite a confusing error to debug.

tl;dr our next.config.js instructions need a LOT of work

[dcramer]

Sorry found another one :)

Next.js plugins need to have a "nextjs" key in package.json for @sentry/nextjs

[dcramer]

one last bit to carry over from slack

Sentry CLI Plugin: Command failed: /mnt/c/Users/David/Documents/GitHub/sentry-intercom/node_modules/@sentry/cli/sentry-cli releases new 21bf3b5cf6347759dbf462212e76f67491677fd5
error: An organization slug is required (provide with --org)

A common use case, especially on Vercel or using env-based configuration, would be to assume Sentry is semi-disabled in development (aka if theres no DSN its not configured). We should answer for this style of configuration by default, as its what we'd recommend to customers.

[dcramer]

@iker-barriocanal you can see my real time monologue in sdks channel, but i figured out i had to use the next-sentry-plugin bit, but expected @sentry/nextjs to make it available at that path. instead i did npm add on it by hand.

[lobsterkatie]

@dcramer - it doesn't address all of your concerns, but here is a PR which changes where we pull the next version from (to avoid problems with non-pinned next versions in a project's package.json) and, as discussed in Slack, pulls much of the boilerplate out of next.config.js and into the SDK proper.

That said, you shouldn't have to manually add the plugin. If the version syncing works, next will load the plugin automatically. Also, as to your first comment (about the module resolution failing), I wonder if you weren't having the problem I mentioned in the description of the above PR. Were you using a yarn link-ed version of the SDK?

And we do have a nextjs key in the plugin's package.json. I think that error was probably fruit of the poison tree - if it didn’t find the plugin, it wouldn't have found that, either.

The one topic you brought up which we do need to address, and haven't, is the sentry-cli error you mentioned. @iker-barriocanal - can you look at that in the morning, please?

[HazAT]

We are merging this now and address everything that's open in a follow-up

[dcramer]

@lobsterkatie I simply did npm add @sentry/nextjs, tried to then run npx sentry-wizard (it failed, sentry-wizard not available), then did the manual instructions and hit the other issues

[lobsterkatie]

The npx command has since been changed to point to the package. Just tried it out and it worked fine.

Use npx @sentry/wizard instead.