[!TIP] Need help? Join our Discord or email jesse@bentonow.com for personalized support.
The Bento Next.js SDK makes it quick and easy to build an excellent analytics experience in your Next.js application. We provide powerful and customizable components and hooks that can be used out-of-the-box to track your users' behavior and manage analytics. We also expose low-level APIs so that you can build fully custom experiences.
Get started with our 📚 integration guides, or 📘 browse the SDK reference.
- Easy integration: Quickly add Bento analytics to your Next.js application with pre-built components.
- Page view tracking: Automatically track page views across your Next.js application.
- User identification: Easily identify users for more detailed analytics.
- Custom event tracking: Track custom events both on the client-side and server-side.
- Next.js version support: Compatible with both Next.js 13+ and legacy versions.
- Server-side integration: Optional server-side tracking with the Bento Node SDK.
- Next.js 12.0+ (with specific support for 13+)
- Node.js 14+
- Bento Account for a valid SITE_UUID
Install the Bento Next.js SDK:
npm install @bentonow/bento-nextjs-sdk --saveOptionally, install the Bento Node SDK for server-side integration:
npm install @bentonow/bento-node-sdk --saveAdd the Bento analytics component to your top-level layout:
For Next.js 13+:
import { BentoAnalytics } from '@bentonow/bento-nextjs-sdk/analytics'
export default function Layout({ children }) {
return (
<html>
<body>
<BentoAnalytics siteUuid={process.env.NEXT_PUBLIC_BENTO_SITE_ID!} userEmail={''} />
{children}
</body>
</html>
)
}For Next.js 12 (legacy):
import { BentoLegacyAnalytics } from '@bentonow/bento-nextjs-sdk/analytics/legacy'
function MyApp({ Component, pageProps }) {
return (
<>
<BentoLegacyAnalytics siteUuid={process.env.NEXT_PUBLIC_BENTO_SITE_ID!} userEmail={''} />
<Component {...pageProps} />
</>
)
}Automatically track page views:
// Next.js 13+
import { useBentoAnalytics } from '@bentonow/bento-nextjs-sdk/analytics'
export default function Layout({ children }) {
useBentoAnalytics(userEmail)
return <>{children}</>
}
// Next.js 12 (legacy)
import { useBentoLegacyAnalytics } from '@bentonow/bento-nextjs-sdk/analytics/legacy'
function MyApp({ Component, pageProps }) {
useBentoLegacyAnalytics(userEmail)
return <Component {...pageProps} />
}Track custom events on the client-side:
window.bento.track('optin', { organisation_name: 'Team Rocket' })
window.bento.tag('customer')Track custom events on the server-side:
import { Analytics } from '@bentonow/bento-node-sdk'
const bento = new Analytics({ /* your configuration */ })
await bento.V1.track({
email: 'user@example.com',
type: 'optin',
fields: {
organisation_name: 'Team Rocket'
}
})- The SDK provides different components for Next.js 13+ and legacy versions.
- Page view tracking is automatic when using the provided components and hooks.
- User identification can be done by passing the user's email to the analytics components or hooks.
- The SDK supports both client-side and server-side event tracking.
- For more advanced usage, you can customize the integration using the Next.js Script component.
We welcome contributions! Please see our contributing guidelines for details on how to submit pull requests, report issues, and suggest improvements.
The Bento SDK for Next.js is available as open source under the terms of the MIT License.