Logtail Vercel logging

Start logging in 2 minutes

Automatically collect logs from your Vercel projects:

  1. Go to Vercel Logtail integration.
  2. Click Add integration and follow the simple steps there.
  3. You should see your logs in Logtail -> Live tail.

Optional structured logging

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

1. Install

Install Logtail Next.js NPM package:

Install Logtail Next
npm install @logtail/next

2. Setup

Set up Logtail Next.js client in next.config.js:

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

module.exports = withLogtail({
  // Your existing config

Import Logtail Next.js logger:

Import Logtail logger
const { log } = require('@logtail/next');

3. Start logging 🎉

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

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 Logtail -> Live tail.


Next.js version 12.1.4 or higher is required.

Need help?

Please let us know at [email protected].
We're happy to help! 🙏

Advanced usage

Web Vitals

Forward Web Vitals metrics provided by Vercel to Logtail.
Set up metrics reporting in pages/_app.js:

Report Web Vitals
export { reportWebVitals } from '@logtail/next';


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

Logging in handlers
const { withLogtail, LogtailAPIRequest } = require('@logtail/next');

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


export default withLogtail(handler);

Log levels

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

Don't send debug logs

Server-side props

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

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