@clipper-dev/mongolytics-next
Advanced tools
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
The npm package @clipper-dev/mongolytics-next receives a total of 11 weekly downloads. As such, @clipper-dev/mongolytics-next popularity was classified as not popular.
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.
Research
Socket found 37 malicious PyPI wheels that abuse Python startup hooks to launch a Bun-powered credential stealer tied to Mini Shai-Hulud/Miasma.
Security News
RubyGems and Bundler 4.0.13 introduced an opt-in cooldown feature that delays newly published gems during dependency resolution.
Security News
pnpm 11.5 now recognizes npm staged publish approvals in release metadata, preventing those releases from being mistaken for lower-trust package publishes.