Next.js

Next.js can emit server-side OpenTelemetry through @vercel/otel. Use @pydantic/logfire-browser with a restricted frontend application token for client-side browser traces.

Server-Side Tracing

Install Vercel’s OpenTelemetry package and the manual logfire API if you want to create spans in React Server Components, route handlers, or server actions:

Terminal

npm install @vercel/otel logfire

Create instrumentation.ts in your project root or src directory:

instrumentation.ts

import { registerOTel } from '@vercel/otel'

export function register() {
  registerOTel({
    serviceName: 'nextjs-app',
  })
}

Set OTLP export to Logfire:

.env.local

OTEL_EXPORTER_OTLP_ENDPOINT=https://logfire-api.pydantic.dev
OTEL_EXPORTER_OTLP_HEADERS='Authorization=your-write-token'

Then use the manual API where useful:

import * as logfire from 'logfire'

export default async function Page() {
  return logfire.span('render home page', {
    callback: async () => {
      logfire.info('loading homepage data')
      return <main>Hello</main>
    },
  })
}

Vercel production deployments can cache build and runtime configuration. If spans do not appear after changing tracing environment variables, clear the Vercel data cache for the project and redeploy.

Client-Side Tracing

Install the browser package:

Terminal

npm install @pydantic/logfire-browser

Create a frontend application under Frontend > Applications, then copy its generated browser setup. The token can only write telemetry for that frontend application and cannot read project data. Follow the Frontend guide for setup and verification.

For Next.js 15.3 and later, configure the browser package in instrumentation-client.ts using the generated regional URL and restricted token. Next.js loads this file once in the browser before the application becomes interactive.

instrumentation-client.ts

import * as logfire from '@pydantic/logfire-browser'

logfire.configureFrontend({
  baseUrl: 'https://logfire-us.pydantic.dev',
  token: '<frontend-application-token>',
})

Optional Proxy

The restricted frontend application token does not need a proxy to keep it secret. A proxy can provide a first-party ingest domain to reduce false-positive blocking; follow the frontend custom domain guide for that setup. For application authentication, origin restrictions, or rate limits, follow the browser package’s authenticated proxy guidance. A Next.js rewrite is not part of normal setup.

See examples/nextjs and examples/nextjs-client-side-instrumentation for working projects.