Next.js Integration Guide

Prerequisites

Next.js 13+
React 18+
Active Calnita Partner Account

Installation Steps

Obtain Partner ID

Log into your Calnita dashboard and copy your unique Partner ID.

Add the Calnita widget script to your Next.js application.

Implementation Methods

App Router Integration

// app/layout.tsx
import Script from 'next/script'
 
export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <Script 
          src={`https://plugin.calnita.com/api/widget?partnerId=YOUR_PARTNER_ID`}
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

Use afterInteractive strategy for optimal performance

Advanced Configuration

Environment Variables

Store your Partner ID securely:

// .env.local
NEXT_PUBLIC_CALNITA_PARTNER_ID=your_partner_id

Troubleshooting

⚠️

Ensure widget script loads correctly in production builds

Verify Partner ID

Check network tab for script loading
Confirm widget visibility

Performance Considerations

Use afterInteractive script strategy
Minimal performance impact
Non-blocking script loading

Compatibility

✅ Next.js 13+
✅ React 18+
✅ TypeScript Support
✅ SSR Compatible

Platform Integration Shopify Integration