# Vercel Better Stack integration

## Start logging in 2 minutes

Automatically collect logs from your Vercel projects:

1. Go to [Vercel Better Stack integration](https://vercel.com/integrations/betterstack ";_blank").
2. Click `Add integration` and follow the simple steps there.
3. You should see your logs in [Better Stack → Live tail](https://telemetry.betterstack.com/team/0/tail ";_blank").
4. Check out your metrics in the [Vercel dashboard](https://telemetry.betterstack.com/team/0/dashboards/platform/vercel_integration ";_blank").

[warning]
**Vercel Pro or Enterprise plan is required**
[/warning]

## Optional structured logging

Take advantage of **full-stack structured logging** in 3 steps.

### 1. Install

Install Better Stack Next.js NPM package:

```sh
[label Install Logtail Next]
npm install @logtail/next
```

### 2. Setup

Set up Better Stack Next.js client in `next.config.js`:

```javascript
[label Wrap Next.js config with Logtail]
const { withLogtail } = require('@logtail/next');

module.exports = withLogtail({
  // Your existing config
});
```

Import Better Stack Next.js logger:

```javascript
[label Import Logtail logger]
const { log } = require('@logtail/next');
```

### 3. Start logging 🎉

Use structured logging in client, edge, or server-side files:

```javascript
[label Send logs to Logtail]
log.error("Something bad happened.");
log.info("Log message with structured logging.", {
    item: "Orange Soda",
    price: 100.00
});
```

You should see your logs in [Better Stack → Live tail](https://telemetry.betterstack.com/team/0/tail ";_blank").

[warning]
**Next.js version 12.1.4 or higher is required.**  
[/warning]

## Need help?

Please let us know at hello@betterstack.com.  
We're happy to help! 🙏

## Need to customize which logs to send?

Set up a [Vercel Log drain](https://betterstack.com/docs/logs/vercel/log-drain/) instead!

## Advanced usage

### Web Vitals

Forward [Web Vitals metrics](https://vercel.com/docs/concepts/analytics/web-vitals ";blank") provided by Vercel to Better Stack.  
Set up metrics reporting in `pages/_app.js`:

```javascript
[label Report Web Vitals]
export { reportWebVitals } from '@logtail/next';
```

### Handlers

Get logger with **automatic log flushing** and built-in **exception logging**.  
Wrap your Next.js route handlers with Better Stack:

```javascript
[label Logging in handlers]
const { withLogtail, LogtailAPIRequest } = require('@logtail/next');

async function handler(req: LogtailAPIRequest, res: NextApiResponse) {
  req.log.info("Hello Logtail!");

  res.status(200).text("OK");
}

export default withLogtail(handler);
```

### Log levels

Better Stack Next.js client provides four log levels: `debug`, `info`, `warn`, and `error`.  
Stop sending `debug` logs to Better Stack:

```sh
[label Don't send debug logs] 
export LOGTAIL_LOG_LEVEL=info
```

### Server-side props

Take advantage of **automatic log flushing** and built-in **exception logging**.   
Wrap your server-side props with Better Stack:

```javascript
[label Server-side props]
const { withLogtailGetServerSideProps } = require('@logtail/next');
export const getServerSideProps = withLogtailGetServerSideProps(
  async ({ req, log }) => {
    log.info("Hello Logtail!");
    return {
      props: {
      },
    }
  }
);
```