Skip to content

docs(nextjs): Update Next.js readme #13185

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Aug 2, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 23 additions & 69 deletions packages/nextjs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,96 +10,50 @@
[![npm dm](https://img.shields.io/npm/dm/@sentry/nextjs.svg)](https://www.npmjs.com/package/@sentry/nextjs)
[![npm dt](https://img.shields.io/npm/dt/@sentry/nextjs.svg)](https://www.npmjs.com/package/@sentry/nextjs)

## Links

- [Official SDK Docs](https://docs.sentry.io/platforms/javascript/guides/nextjs/)
- [TypeDoc](http://getsentry.github.io/sentry-javascript/)
> See the [Official Sentry Next.js SDK Docs](https://docs.sentry.io/platforms/javascript/guides/nextjs/) to get started.

## Compatibility

Currently, the minimum Next.js supported version is `11.2.0`.

## General

This package is a wrapper around `@sentry/node` for the server and `@sentry/react` for the client, with added
functionality related to Next.js.

To use this SDK, initialize it in the Next.js configuration, in the `sentry.client.config.ts|js` file, and in the
[Next.js Instrumentation Hook](https://nextjs.org/docs/app/building-your-application/optimizing/instrumentation)
(`instrumentation.ts|js`).
Currently, the minimum supported version of Next.js is `13.2.0`.

```javascript
// next.config.js
## Installation

const { withSentryConfig } = require('@sentry/nextjs');
To get started installing the SDK, use the Sentry Next.js Wizard by running the following command in your terminal or
read the [Getting Started Docs](https://docs.sentry.io/platforms/javascript/guides/nextjs/):

const nextConfig = {
experimental: {
// The instrumentation hook is required for Sentry to work on the serverside
instrumentationHook: true,
},
};

// Wrap the Next.js configuration with Sentry
module.exports = withSentryConfig(nextConfig);
```sh
npx @sentry/wizard@latest -i nextjs
```

```javascript
// sentry.client.config.js or .ts

import * as Sentry from '@sentry/nextjs';
The wizard will prompt you to log in to Sentry. After the wizard setup is completed, the SDK will automatically capture
unhandled errors, and monitor performance.

Sentry.init({
dsn: '__DSN__',
// Your Sentry configuration for the Browser...
});
```
## Custom Usage

```javascript
// instrumentation.ts
To set context information or to send manual events, you can use `@sentry/nextjs` as follows:

import * as Sentry from '@sentry/nextjs';

export function register() {
if (process.env.NEXT_RUNTIME === 'nodejs') {
Sentry.init({
dsn: '__DSN__',
// Your Node.js Sentry configuration...
});
}

if (process.env.NEXT_RUNTIME === 'edge') {
Sentry.init({
dsn: '__DSN__',
// Your Edge Runtime Sentry configuration...
});
}
}
```

To set context information or send manual events, use the exported functions of `@sentry/nextjs`.

```javascript
```ts
import * as Sentry from '@sentry/nextjs';

// Set user information, as well as tags and further extras
Sentry.setExtra('battery', 0.7);
Sentry.setTag('user_mode', 'admin');
Sentry.setUser({ id: '4711' });
Sentry.setContext('application_area', { location: 'checkout' });

// Add a breadcrumb for future events
Sentry.addBreadcrumb({
message: 'My Breadcrumb',
message: '"Add to cart" clicked',
// ...
});

// Capture exceptions, messages or manual events
// Capture exceptions or messages
Sentry.captureException(new Error('Oh no.'));
Sentry.captureMessage('Hello, world!');
Sentry.captureException(new Error('Good bye'));
Sentry.captureEvent({
message: 'Manual',
stacktrace: [
// ...
],
});
```

## Links

- [Official SDK Docs](https://docs.sentry.io/platforms/javascript/guides/nextjs/)
- [Sentry.io](https://sentry.io/?utm_source=github&utm_medium=npm_nextjs)
- [Sentry Discord Server](https://discord.gg/Ww9hbqr)
- [Stack Overflow](https://stackoverflow.com/questions/tagged/sentry)
Loading