API Reference

This page provides a detailed reference for all the public functions, components, and hooks exported by the @clipper-dev/mongolytics-next package.

Client API

These exports are intended for use in client-side code (React components) to initiate tracking. They should be imported from @clipper-dev/mongolytics-next/client.

`<Mongolyth />`

The <Mongolyth /> component is the simplest and recommended way to enable site-wide analytics. It's a "drop-in" client component that renders nothing to the DOM but automatically handles page view tracking.

Props

routerType
- Type: 'app' | 'pages'
- Default: 'app'
- Description: Specifies which Next.js router you are using. This is required for projects using the legacy Pages Router.

Usage

For App Router

// app/layout.tsx
import { Mongolyth } from '@clipper-dev/mongolytics-next/client';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Mongolyth />
        {children}
      </body>
    </html>
  );
}

For Pages Router

// pages/_app.tsx
import { Mongolyth } from '@clipper-dev/mongolytics-next/client';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Mongolyth routerType="pages" />
      <Component {...pageProps} />
    </>
  );
}

`useMongolytics()`

The useMongolytics() hook is the underlying logic used by the <Mongolyth /> component. You can use it directly for more advanced use cases, such as integrating analytics tracking into custom components or other hooks.

Parameters

The hook accepts an optional options object with the following property:

routerType
- Type: 'app' | 'pages'
- Default: 'app'
- Description: Same as the prop for the <Mongolyth /> component.

Usage

In a custom client component

'use client';
import { useMongolytics } from '@clipper-dev/mongolytics-next/client';

function MyCustomComponent() {
  // For App Router (default)
  useMongolytics();

  // For Pages Router
  useMongolytics({ routerType: 'pages' });

  // ... your other component logic
}

Server API

These exports are pre-built API handlers for use in your Next.js backend to receive tracking data. They should be imported from @clipper-dev/mongolytics-next/server.

`mongolyticsAppRouteHandler`

This is the API handler designed for the Next.js App Router. It should be exported as POST from a route.ts file.

Usage

/app/api/mongolytics/route.ts

// app/api/mongolytics/route.ts
import { mongolyticsAppRouteHandler as POST } from '@clipper-dev/mongolytics-next/server';

export { POST };

`mongolyticsPagesRouterHandler`

This is the API handler designed for the legacy Pages Router. It should be the default export from an API file in the pages/api directory.

Usage

/pages/api/mongolytics.ts

// pages/api/mongolytics.ts
import { mongolyticsPagesRouterHandler } from '@clipper-dev/mongolytics-next/server';

export default mongolyticsPagesRouterHandler;