More Premium Hugo Themes Premium Nextjs Themes

Next Axiom

The official Next.js library for Axiom.

Next Axiom

The official Next.js library for Axiom.

Author Avatar Theme by axiomhq
Github Stars Github Stars: 395
Last Commit Last Commit: Dec 17, 2024 -
First Commit Created: Aug 27, 2024 -
default image

Overview

The next-axiombuild library enables users to send Web Vitals and structured logs from Next.js applications to Axiom for enhanced observability. By leveraging Axiom’s next-generation datastore, users can ingest massive amounts of data efficiently without limits on storage. With the ability to query all data regardless of age and create powerful dashboards for continuous observability, Axiom promises seamless data management and analysis.

Features

  • Efficient Data Ingestion: Ingest petabytes of data with ultimate efficiency.
  • Query All Data: Query all data regardless of its age or source.
  • Powerful Dashboards: Build personalized dashboards for quick data analysis and sharing.

Installation

  1. Install next-axiom: Run npm install --save next-axiom in the root folder of your Next.js app.
  2. Set Environment Variables: Add NEXT_PUBLIC_AXIOM_DATASET and NEXT_PUBLIC_AXIOM_TOKEN to the environment variables of your Next.js app.
  3. Configure withAxiom: Wrap your Next.js configuration in withAxiom in the next.config.ts file.
  4. Capture Traffic Requests: Create a middleware.ts file to capture traffic requests.
  5. Send Web Vitals: Add the AxiomWebVitals component to the app/layout.tsx file to send Web Vitals.
  6. Send Logs: Utilize log functions to send logs from different parts of the app.
  7. Route Handlers: Wrap route handlers in withAxiom to add a logger to requests and log exceptions automatically.
  8. Client and Server Components: Use useLogger and Logger from next-axiom to send logs from client and server components, respectively.
  9. Log Levels: Define log levels based on your preference, such as debug, info, warn, error, or off.

Summary

The next-axiombuild library facilitates seamless data management and observability for Next.js applications by enabling efficient data ingestion, flexible querying capabilities, and customizable dashboards. With an easy installation process and a range of features for capturing traffic requests, sending Web Vitals, and managing log levels, users can enhance their Next.js apps’ performance and visibility with Axiom’s powerful functionalities.