Next.js is a popular open-source JavaScript framework built on top of React, developed by Vercel. It’s used by a wide range of companies and organizations, from startups to large enterprises, due to its performance benefits and developer-friendly features.

To send data from your Next.js app to Axiom, choose one of the following options:

The choice between these options depends on your individual requirements:

  • The two options can collect different event types.
    Event typeAxiom Vercel appnext-axiom library
    Application logsYesYes
    Web VitalsNoYes
    HTTP logsYesSoon
    Build logsYesNo
  • If you already use Vercel for deployments, the Axiom Vercel app can be easier to integrate into your existing experience.
  • The cost of these options can differ widely depending on the volume of data you transfer. The Axiom Vercel app depends on Vercel Log Drains, a feature that’s only available on paid plans. For more information, see the blog post on the changes to Vercel Log Drains.

For information on the Axiom Vercel app and migrating from the Vercel app to the next-axiom library, see Axiom Vercel app.

The rest of this page explains how to send data from your Next.js app to Axiom using the next-axiom library.

​
Prerequisites

​
Install next-axiom

  1. In your terminal, go to the root folder of your Next.js app, and then run npm install --save next-axiom to install the latest version of next-axiom.
  2. Add the following environment variables to your Next.js app:
    • NEXT_PUBLIC_AXIOM_DATASET is the name of the Axiom dataset where you want to send data.
    • NEXT_PUBLIC_AXIOM_TOKEN is the Axiom API token you have generated.
  3. In the next.config.ts file, wrap your Next.js configuration in withAxiom:
const { withAxiom } = require('next-axiom');

module.exports = withAxiom({
  // Your existing configuration.
});

​
Capture traffic requests

To capture traffic requests, create a middleware.ts file in the root folder of your Next.js app:

import { Logger } from 'next-axiom'
import { NextResponse } from 'next/server'
import type { NextFetchEvent, NextRequest } from 'next/server'

export async function middleware(request: NextRequest, event: NextFetchEvent) {
    const logger = new Logger({ source: 'middleware' }); // traffic, request
    logger.middleware(request)

    event.waitUntil(logger.flush())
    return NextResponse.next()

// For more information, see Matching Paths below
export const config = {
}

​
Web Vitals

To send Web Vitals to Axiom, add the AxiomWebVitals component from next-axiom to the app/layout.tsx file:

import { AxiomWebVitals } from 'next-axiom';

export default function RootLayout() {
  return (
    <html>
      ...
      <AxiomWebVitals />
      <div>...</div>
    </html>
  );
}

Web Vitals are only sent from production deployments.

​
Logs

Send logs to Axiom from different parts of your app. Each log function call takes a message and an optional fields object.

log.debug('Login attempt', { user: 'j_doe', status: 'success' }); // Results in {"message": "Login attempt", "fields": {"user": "j_doe", "status": "success"}}
log.info('Payment completed', { userID: '123', amount: '25USD' });
log.warn('API rate limit exceeded', { endpoint: '/users/1', rateLimitRemaining: 0 });
log.error('System Error', { code: '500', message: 'Internal server error' });

​
Route handlers

Wrap your route handlers in withAxiom to add a logger to your request and log exceptions automatically:

import { withAxiom, AxiomRequest } from 'next-axiom';

export const GET = withAxiom((req: AxiomRequest) => {
  req.log.info('Login function called');

  // You can create intermediate loggers
  const log = req.log.with({ scope: 'user' });
  log.info('User logged in', { userId: 42 });

  return NextResponse.json({ hello: 'world' });
});

​
Client components

To send logs from client components, add useLogger from next-axiom to your component:

'use client';
import { useLogger } from 'next-axiom';

export default function ClientComponent() {
  const log = useLogger();
  log.debug('User logged in', { userId: 42 });
  return <h1>Logged in</h1>;
}

​
Server components

To send logs from server components, add Logger from next-axiom to your component, and call flush before returning:

import { Logger } from 'next-axiom';

export default async function ServerComponent() {
  const log = new Logger();
  log.info('User logged in', { userId: 42 });

  // ...

  await log.flush();
  return <h1>Logged in</h1>;
}

​
Log levels

The log level defines the lowest level of logs sent to Axiom. Choose one of the following levels (from lowest to highest):

  • debug is the default setting. It means that you send all logs to Axiom.
  • info
  • warn
  • error means that you only send the highest-level logs to Axiom.
  • off means that you don’t send any logs to Axiom.

For example, to send all logs except for debug logs to Axiom:

export NEXT_PUBLIC_AXIOM_LOG_LEVEL=info

​
Capture errors

To capture routing errors, use the error handling mechanism of Next.js:

  1. Go to the app folder.
  2. Create an error.tsx file.
  3. Inside your component function, add useLogger from next-axiom to send the error to Axiom. For example:
"use client";

import NavTable from "@/components/NavTable";
import { LogLevel } from "@/next-axiom/logger";
import { useLogger } from "next-axiom";
import { usePathname } from "next/navigation";

export default function ErrorPage({
  error,
}: {
  error: Error & { digest?: string };
}) {
  const pathname = usePathname()
  const log = useLogger({ source: "error.tsx" });
  let status =  error.message == 'Invalid URL' ? 404 : 500;

  log.logHttpRequest(
    LogLevel.error,
    error.message,
    {
      host: window.location.href,
      path: pathname,
      statusCode: status,
    },
    {
      error: error.name,
      cause: error.cause,
      stack: error.stack,
      digest: error.digest,
    },
  );

  return (
    <div className="p-8">
      Ops! An Error has occurred:{" "}
      <p className="text-red-400 px-8 py-2 text-lg">`{error.message}`</p>
      <div className="w-1/3 mt-8">
        <NavTable />
      </div>
    </div>
  );
}

Was this page helpful?

LaravelNext.js Using OTel