Sentry-javascript: Migration guide from `@sentry/browser` to `@sentry/react` with Next.js

[Vadorequest]

Is there a guide explaining how to migrate from @sentry/browser to @sentry/browser in with Next.js?

I'm one of the maintainers of Next Right Now and I wish to change our current implementation (see issue)

I have a few topics in mind:

• Should @sentry/react be used with Next.js? The official example still uses @sentry/browser
• Example using ErrorBoundary and how/where it might be done considering SSG and/or SSR (does it need to be done differently depending on the rendering mode?)
• Similar question regarding FallbackComponent for SSG/SSR concerns.
• Example using Profiler, should it be done in _app?
• I'm concerned about the Webpack trick regarding @sentry/server being dynamically replaced by @sentry/browser during build, as it seems to fail from Next.js v10.0.4+, is it still recommended doing that?

---

Additionally, if someone from the Sentry team would like to review the Next Right Now Sentry configuration and usage, it would be awesome. Even directions regarding what improvements we might do would be a great help (I see with-sentry has got quite a few new features/enhancements). Here are some examples of how Sentry is configured/used in Next Right Now:

• https://github.com/UnlyEd/next-right-now/blob/v2-mst-aptd-at-lcz-sty/src/utils/monitoring/sentry.ts
• https://github.com/UnlyEd/next-right-now/blob/v2-mst-aptd-at-lcz-sty/next.config.js#L237-L257
• https://github.com/UnlyEd/next-right-now/blob/v2-mst-aptd-at-lcz-sty/src/components/errors/DefaultErrorLayout.tsx
• https://github.com/UnlyEd/next-right-now/blob/v2-mst-aptd-at-lcz-sty/src/pages/api/startVercelDeployment.ts#L112-L119
• Error-handling demo

[kamilogorek]

@Vadorequest we are currently working on the integrated Next.js+Sentry solution. There's already a work-in-progress here https://github.com/vercel/next.js/pull/18272 which should be shipped in Q1. I'll make sure to keep this issue updated as we go.