Next JS
Next.js is the leading React framework for production, offering server-side rendering, static generation, and full-stack capabilities trusted by millions of developers.
Install Translate.website on Next.js
Building with Next.js? You don't need any special i18n configuration or language routing to make your Next.js site multilingual.
By adding the Translate.website script to your root document or layout, you get instant automatic translation across your entire site — whether you're using the App Router or Pages Router, deployed on Vercel or self-hosted.
Once set up, Translate.website will automatically detect each visitor's language preference and serve translated content in real time — with no impact on your SSR, ISR, or static page generation.
This guide walks you through the entire setup for both App Router and Pages Router.
Add Translate.website to Your Next.js Site
Adding Translate.website to Next.js takes just a few minutes. One script tag in your root layout or document and your entire site is multilingual.
Before You Begin
- An active Translate.website account with your snippet ready.
- A Next.js project using either Pages Router (pages/_document.tsx) or App Router (app/layout.tsx).
- Administrator/developer access to the Next.js project.
Step 1: Get Your Translate.website Snippet
Before you add the script to your Next.js project, you need to retrieve your unique Translate.website snippet from the dashboard. This snippet is specific to your account and website domain.
- Log in to your Translate.website account at app.translate.website
- From the dashboard, navigate to Settings → Snippet.
- Copy the full script tag — it looks like: <script src='...' data-site-id='...'></script>
- Keep this snippet ready — you'll paste it into your Next.js project in the next step.
Step 2: Add the Script to _document.tsx (Pages Router) or layout.tsx (App Router)
Next.js provides two ways to add global scripts. For the Pages Router, add to pages/_document.tsx inside <Head>. For the App Router, use next/script in app/layout.tsx.
- Pages Router: Open pages/_document.tsx. Inside the <Head> component, paste your snippet before </Head>.
- App Router: Open app/layout.tsx. Import Script from 'next/script'. Add <Script src='YOUR_SCRIPT_URL' strategy='afterInteractive' data-site-id='YOUR_ID' /> inside the layout.
- Both approaches ensure the script loads on every page of your Next.js site.
- Save the file.
Step 3: Test and Deploy
Run your Next.js dev server to verify the integration, then deploy to production.
- Run: npm run dev
- Open http://localhost:3000 and check the browser console for any errors.
- Verify the translation widget appears on your pages.
- Deploy normally — vercel deploy or your standard deploy pipeline.
🚀 What Happens After Deploying?
Translate.website loads on every page via the shared document or root layout. It detects visitor language preferences and serves translated content automatically — no additional Next.js configuration needed.
The script is non-blocking and loads after your page content — it will not affect your Next.js SSR, ISR, or static generation.
🔁 Safe & Reversible
This integration is completely reversible. To remove Translate.website from your Next.js site, simply delete the Script tag from your layout.tsx or _document.tsx and redeploy. No packages were installed, no routes were modified, and no permanent changes were made to your Next.js configuration.
💡 Why This Method Is Recommended
- Works with both App Router and Pages Router — no migration needed.
- Compatible with Vercel, Netlify, and self-hosted Next.js deployments.
- Zero impact on SSR, ISR, or Static Generation — the script loads client-side only.
- Easily removable — delete the Script tag or snippet from your layout/document to uninstall.
Ready to make your Next.js site multilingual?
Add one script tag and your Next.js site supports 100+ languages instantly.
