...
);
}
```
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.
```ts [expandable]
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:
```ts [expandable]
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:
```ts [expandable]
"use client";
import { useLogger } from "next-axiom";
export default function ClientComponent() {
const log = useLogger();
log.debug("User logged in", { userId: 42 });
return
Ops! An Error has occurred:{" "}
`{error.message}`
);
}
```
### Extend logger
To extend the logger, use `log.with` to create an intermediate logger. For example:
```ts [expandable]
const logger = useLogger().with({ userId: 42 });
logger.info("Hi"); // will ingest { ..., "message": "Hi", "fields" { "userId": 42 }}
```
## Use @axiomhq/nextjs library
The @axiomhq/nextjs library is part of the Axiom JavaScript SDK, an open-source project and welcomes your contributions. For more information, see the [GitHub repository](https://github.com/axiomhq/axiom-js).
### Install @axiomhq/nextjs
1. In your terminal, go to the root folder of your Next.js app and run the following command:
```sh
npm install --save @axiomhq/js @axiomhq/logging @axiomhq/nextjs @axiomhq/react
```
2. Create the folder `lib/axiom` to store configurations for Axiom.
3. Create a `axiom.ts` file in the `lib/axiom` folder with the following content:
```ts lib/axiom/axiom.ts [expandable]
import { Axiom } from '@axiomhq/js';
const axiomClient = new Axiom({
token: process.env.NEXT_PUBLIC_AXIOM_TOKEN!,
});
export default axiomClient;
```
4. In the `lib/axiom` folder, create a `server.ts` file with the following content:
```ts lib/axiom/server.ts [expandable]
import axiomClient from '@/lib/axiom/axiom';
import { Logger, AxiomJSTransport } from '@axiomhq/logging';
import { createAxiomRouteHandler, nextJsFormatters } from '@axiomhq/nextjs';
export const logger = new Logger({
transports: [
new AxiomJSTransport({ axiom: axiomClient, dataset: process.env.NEXT_PUBLIC_AXIOM_DATASET! }),
],
formatters: nextJsFormatters,
});
export const withAxiom = createAxiomRouteHandler(logger);
```
The `createAxiomRouteHandler` is a builder function that returns a wrapper for your route handlers. The wrapper handles successful responses and errors thrown within the route handler. For more information on the logger, see [the @axiomhq/logging library](/guides/javascript#use-axiomhqlogging).
5. In the `lib/axiom` folder, create a `client.ts` file with the following content: