Installation
Install Bantico on Next.js
For this guide, we are referring to Next.js App Router (v13+).
Add
NEXT_PUBLIC_BANTICO_TOKEN to your environment variables and only load Bantico when a project token is available.Environment variable
Add your Bantico project token to .env.local.
.env.local
NEXT_PUBLIC_BANTICO_TOKEN=your_project_tokenUsing the root layout
Add Bantico to your root layout and pass your project token to data-token. The example also sets window.__BANTICO_TOKEN__ as a safe fallback for older tracker versions.
app/layout.tsx
import type { ReactNode } from "react";import Script from "next/script"; const banticoToken = process.env.NEXT_PUBLIC_BANTICO_TOKEN; export default function RootLayout({ children,}: { children: ReactNode;}) { return ( <html lang="en"> <body> {banticoToken ? ( <> <script dangerouslySetInnerHTML={{ __html: `window.__BANTICO_TOKEN__=$${JSON.stringify( banticoToken );`, }} /> <Script id="bantico-tracker" src="https://app.bantico.com/bantico.js" data-token={banticoToken} strategy="afterInteractive" /> </> ) : null} {children} </body> </html> );}