Next.js Pino Logflare Logging

The Next.js Pino Logflare Logging Example is a boilerplate Next.js application that demonstrates unified client-side and server-side logging to Logflare using the pino and pino-logflare libraries.

What is the Next.js Pino Logflare Logging Example?

This is a Next.js project bootstrapped with create-next-app, maintained by Logflare on GitHub. It provides a single logger interface configured in logger/logger.js that sends both client and server logs to Logflare. The repository includes runnable examples for logging from API routes and the browser, and it is designed to be deployed to Vercel with the Logflare integration.

What makes it stand out?

• Single logger interface — One configuration in logger/logger.js uses pino and pino-logflare to handle logging from both Node.js and browser environments.
• Server-side logging examples — Explore the pages/api directory to see different ways to log data and errors from API endpoints.
• Client-side logging — The pages/index.js file demonstrates how pino-logflare captures browser console logs and sends them to Logflare.
• Vercel deployment — A one-click deploy button installs the Logflare integration; a manual log drain must then be set up in the Logflare dashboard.
• Standard Next.js structure — The project follows the default create-next-app layout, making it easy to compare against a plain Next.js setup.

Who should use it?

• Next.js developers who want to add structured logging without wiring up separate client and server loggers.
• Teams on Vercel that need to forward application logs and platform logs to Logflare for centralized observability.
• Developers evaluating pino-logflare can use this repo as a working reference before integrating it into production apps.

What can you do with it?

• Next.js developers: Copy the logger configuration and API route examples into your own project to get pino-based logging working in minutes.
• Vercel users: Deploy this template to Vercel, connect the Logflare integration, and then create a log drain so both app and platform logs flow to Logflare.
• Observability engineers: Test how pino-logflare behaves in a real Next.js application, including client-side event capture, before committing to it at scale.

How does it work?

The project uses pino as the logger on the server and pino-logflare as the transport that forwards logs to Logflare's API. In the browser, pino-logflare captures client-side events and sends them to the same Logflare source. After deploying to Vercel, you must visit the Logflare integrations page and set up a log drain to receive platform logs.

FAQ

Is this template free to use?

The repository is publicly available on GitHub, so the code is free to use. Logflare's service and Vercel hosting have their own pricing, which may apply depending on your usage.

How do I set up the Logflare integration?

The Vercel deploy flow installs the Logflare integration automatically. After deployment, you need to create a log drain from your Logflare account to start receiving logs. A link to manage log drains is provided in the README.

Does this work for both client and server logs?

Yes. The example shows server-side logging from API routes and client-side logging from the browser, all unified through the pino-logflare configuration.

What is pino-logflare?

pino-logflare is a pino transport that sends logs to Logflare. It enables a single logger interface to work across Node.js and browser environments, forwarding logs to Logflare's ingestion API.