@clipper-dev/mongolytics-next
Advanced tools
Self-hosted, MongoDB-powered analytics for React/Next.js
mongolytics-next
A lightweight, self-hosted analytics solution for Next.js applications, supporting both the App Router and Pages Router. Powered by your own MongoDB database, Mongolytics allows you to take full ownership of your user data.
navigator.sendBeacon to ensure it never slows down your user experience.npm install @clipper-dev/mongolytics-next uuid
npm install -D @types/uuid
Getting started is a simple three-step process.
Create a .env.local file in the root of your Next.js project. This tells Mongolytics how to connect to your database.
# .env.local
MONGOLYTICS_URI="your-mongodb-atlas-connection-string"
MONGOLYTICS_DB_NAME="your-analytics-database-name"
This single API endpoint securely receives tracking data. Choose the setup for your router type.
Create a new file at app/api/mongolytics/route.ts and export our pre-built handler.
// app/api/mongolytics/route.ts
import { mongolyticsAppRouteHandler as POST } from '@clipper-dev/mongolytics-next/server';
export { POST };
Create a new file at pages/api/mongolytics.ts.
// pages/api/mongolytics.ts
import { mongolyticsPagesRouterHandler } from '@clipper-dev/mongolytics-next/server';
export default mongolyticsPagesRouterHandler;
Add the <Mongolyth /> component to your root layout file. It automatically detects page changes and sends tracking events.
Add the component to app/layout.tsx.
// app/layout.tsx
import { Mongolyth } from '@clipper-dev/mongolytics-next/client';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<Mongolyth />
{children}
</body>
</html>
);
}
Add the component to pages/_app.tsx and specify the routerType.
// pages/_app.tsx
import { Mongolyth } from '@clipper-dev/mongolytics-next/client';
import type { AppProps } from 'next/app';
function MyApp({ Component, pageProps }: AppProps) {
return (
<>
<Mongolyth routerType="pages" />
<Component {...pageProps} />
</>
);
}
export default MyApp;
useMongolytics HookFor more complex use cases where you might need to integrate analytics tracking with other logic, you can use the underlying useMongolytics hook directly instead of the <Mongolyth /> 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
return <div>...</div>
}
Deploy your application. You can verify it's working by visiting a few pages and checking your MongoDB database for a new sessions collection containing user session documents.
FAQs
Self-hosted, MongoDB-powered analytics for React/Next.js
We found that @clipper-dev/mongolytics-next demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.
Security News
The Axios compromise shows how time-dependent dependency resolution makes exposure harder to detect and contain.