feat: Ref update next.js config (#3472)

Co-authored-by: Kamil Ogórek <[email protected]>
Co-authored-by: iker barriocanal <[email protected]>
Co-authored-by: Fiona <[email protected]>

Author: 4 people

src/includes/getting-started-config/javascript.nextjs.mdx

@@ -14,4 +14,17 @@ See [manual configuration](/platforms/javascript/guides/nextjs/manual-setup/) fo
 
 To complete your configuration, add [options](/platforms/javascript/configuration/) to your two `Sentry.init()` calls (in `sentry.client.config.js` and `sentry.server.config.js`, respectively). In those two files you can also set context data - data about the [user](/platforms/javascript/enriching-events/identify-user/), for example, or [tags](/platforms/javascript/enriching-events/tags/), or even [arbitrary data](/platforms/javascript/enriching-events/context/) - which will be added to every event sent to Sentry.
 
-Once you're set up, the SDK will automatically capture unhandled errors and promise rejections. You can also [manually capture errors](/platforms/javascript/guides/nextjs/usage).
+Once you're set up, the SDK will automatically capture unhandled errors and promise rejections in your frontend. You can also [manually capture errors](/platforms/javascript/guides/nextjs/usage).
+
+To capture server/API route errors, you need to wrap your handlers with a Sentry function:
+
+```javascript
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { withSentry } from '@sentry/nextjs';
+
+const handler = async (req, res) => {
+  res.status(200).json({ name: 'John Doe' })
+}
+
+export default withSentry(handler);
+```

src/includes/getting-started-verify/javascript.nextjs.mdx

@@ -0,0 +1,28 @@
+Add a button to a frontend component that throws an error:
+
+```javascript {filename:pages/index.js}
+<button type="button" onClick={() => {
+    throw new Error("Sentry Frontend Error");
+}}>
+    Throw error
+</button>
+```
+
+And throw an error in an API route:
+
+```javascript {filename:pages/api/hello.js}
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { withSentry } from '@sentry/nextjs';
+
+const handler = async (req, res) => {
+  throw new Error('API throw error test')
+  res.status(200).json({ name: 'John Doe' })
+}
+
+export default withSentry(handler);
+```
+<Note>
+
+Errors triggered from within Browser DevTools are sandboxed, so will not trigger an error handler. Place the snippet directly in your code instead.
+
+</Note>