@customerlog/next

Next.js SDK for customer.log.

Track events from both client and server in your Next.js app. Re-exports the React hook for the browser and provides a createServerClient for API routes and Server Actions.

// Client component
import { useCustomerLog } from "@customerlog/next";

function Tracker() {
  const { log } = useCustomerLog({ apiKey: "cl_xxx" });
  // ...
}

// Server: API route or Server Action
import { createServerClient } from "@customerlog/next/server";

const customer = createServerClient({ apiKey: process.env.CUSTOMER_LOG_API_KEY! });
await customer.log({ channel: "orders", title: "Order placed" });

Installation

npm install @customerlog/next
# or
yarn add @customerlog/next
# or
pnpm add @customerlog/next

Requires next >= 13 and react >= 16.8.

Quick start

Client-side (browser)

"use client";

import { useCustomerLog } from "@customerlog/next";

export function SignupButton() {
  const { log } = useCustomerLog({
    apiKey: process.env.NEXT_PUBLIC_CUSTOMER_LOG_API_KEY!,
  });

  return (
    <button
      onClick={() =>
        log({
          channel: "signups",
          title: "Signup button clicked",
          level: "info",
          metadata: { page: window.location.pathname },
        })
      }
    >
      Sign up
    </button>
  );
}

Server-side (API route)

// app/api/webhook/route.ts
import { createServerClient } from "@customerlog/next/server";

export async function POST(req: Request) {
  const body = await req.json();
  const customer = createServerClient({
    apiKey: process.env.CUSTOMER_LOG_API_KEY!,
  });

  await customer.log({
    channel: "webhooks",
    title: `Stripe ${body.type}`,
    level: body.type === "charge.failed" ? "error" : "info",
    dedupeKey: body.id, // idempotency
    metadata: { data: body.data.object },
    notify: body.type === "charge.failed",
  });

  return Response.json({ received: true });
}

Server-side (Server Action)

"use server";

import { createServerClient } from "@customerlog/next/server";

export async function trackPayment(formData: FormData) {
  const customer = createServerClient({
    apiKey: process.env.CUSTOMER_LOG_API_KEY!,
  });

  await customer.log({
    channel: "payments",
    title: "Payment submitted",
    level: "info",
    metadata: { amount: formData.get("amount") },
  });
}

API

Client: useCustomerLog(config)

Re-exports @customerlog/react. See the React SDK for full docs.

Server: createServerClient(config)

| Option | Type | Default | Description | |--------|------|---------|-------------| | apiKey | string | — | Required. Your project's API key | | baseUrl | string | https://event.customerlog.byorello.space | Override for self-hosted or dev |

Returns { log }.

log(options)

See the full option reference in the core SDK.

License

MIT