Add SiteDialect to Next.js

Integrate AI-powered translations into your Next.js application. SSR compatible, works with both Pages Router and App Router, and loads asynchronously so it won’t affect your Core Web Vitals.

Installation — Choose Your Router

Option A: App Router (app/layout.tsx)

Import the Script component from next/script and add it to your root layout.

// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://cdn.sitedialect.com/sd.js"
          data-site-id="YOUR_SITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Option B: Pages Router (_document.js)

Add the script tag to your custom _document.js (or _document.tsx) inside the <Head> component.

// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <script
          src="https://cdn.sitedialect.com/sd.js"
          data-site-id="YOUR_SITE_ID"
          defer
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Verify

Run npm run dev and open your app in the browser. The language switcher widget should appear. Navigate between routes to confirm translations persist across client-side transitions.

Compatibility Notes

SSR & SSG: SiteDialect loads client-side after hydration, so it works identically with server-side rendering, static generation, and ISR. No server-side configuration needed.
Client-side navigation: The script listens for route changes via MutationObserver and re-translates content on navigation. Works with both next/link and next/router transitions.
React Server Components: Fully compatible. The script runs in the browser and translates the rendered DOM regardless of whether components are server or client components.
Vercel / Netlify / self-hosted: No platform-specific configuration. The script is loaded from our CDN and works wherever your Next.js app is deployed.

SEO Benefits

SiteDialect generates cached translations that are visible to search engine crawlers, complementing Next.js’s built-in SEO strengths. Translated content is indexable without requiring next-intl, next-i18next, or manual locale routing. You get multilingual search visibility with a single codebase and zero i18n configuration overhead.

Ship multilingual without the i18n complexity

One component. Zero locale files. Every language.

Get Started — $5.99/mo