Lovalingo + Next.js
The simplest way to add i18n to your Next.js App Router project
What is the best way to add i18n to Next.js?
Lovalingo adds managed browser translation to Next.js apps built with React or Next.js without manual JSON dictionaries. The host framework remains responsible for crawlable locale routes and SEO output.
What is Next.js?
Next.js is a React framework by Vercel that provides server-side rendering, static generation, file-based routing, and a rich ecosystem. Lovalingo's browser runtime can be mounted in an App Router client boundary.
Why use Lovalingo for Next.js translation?
Next.js App Router requires explicit locale routing and translated content. Lovalingo can replace browser message-catalog translation with managed bundles, while Next.js continues to generate locale URLs, target-language raw HTML, metadata, canonical tags, hreflang, and sitemap entries.
- Full Next.js App Router support
- Client-boundary runtime alongside Server Components
- Host-managed locale URLs (/fr/, /de/)
- Hreflang support with host-integration verification
- Alternative to message-catalog translation
- Zero JSON translation files
How do you install Lovalingo in Next.js?
Copy and paste this prompt into Next.js to add Lovalingo automatically:
Add automatic i18n to this Next.js App Router project with Lovalingo.
1. Run npm install @lovalingo/lovalingo.
2. Create a client provider that dynamically imports @lovalingo/lovalingo/core after hydration.
3. Wrap the provider in an error boundary that renders the English source app if the runtime fails.
4. Mount the client provider from app/layout.tsx; never statically import the package in the server layout.
5. Use seo={false} when Next.js owns metadata.
6. Implement html[lang], locale paths, target-language raw content, metadata, canonical, hreflang, and sitemap output in Next.js.
7. Add the LanguageSwitcher and keep internal navigation locale-aware.
8. Test raw HTML, hydrated translation, redirects, stale storage, cold loads, CDN failures, and zero browser page errors.How do you set up Lovalingo with Next.js?
- 1
Install Lovalingo
Run `npm install @lovalingo/lovalingo` in your Next.js project.
- 2
Mount a safe client provider
Dynamically import the core provider after hydration and keep an English source fallback if the runtime fails.
- 3
Add middleware
Create or update middleware.ts to detect locale from URL prefix and set the x-locale header.
- 4
Add your public anon key
Add NEXT_PUBLIC_LOVALINGO_PUBLIC_ANON_KEY to your .env.local file. Get your public anon key from lovalingo.com.
- 5
Add a LanguageSwitcher
Import and place the LanguageSwitcher component in your Header or navigation.
Ready to translate your Next.js app?
Get started free. No credit card required. Add 10+ languages with the setup path that fits your app stack.
FAQ
How is Lovalingo different from next-intl for Next.js?
next-intl uses application-owned message catalogs and can render them on the server. Lovalingo loads managed translations for rendered browser text without hand-maintained locale files; Next.js must still own any server-rendered translated output and raw SEO.
Does Lovalingo work with Next.js Server Components?
Mount the Lovalingo provider in a client boundary after hydration. Server Components can remain in the app, but Lovalingo's public runtime translates rendered browser DOM rather than Server Component output on the server.
Will Lovalingo generate correct hreflang tags for my Next.js site?
Lovalingo can inject browser hreflang data, but Next.js should generate the canonical and full hreflang cluster in raw HTML and keep the localized sitemap coherent. Verify both raw and hydrated output.
Can I use Lovalingo with an existing Next.js i18n setup?
Yes, but define ownership clearly. Lovalingo can handle browser translation and switching while the existing setup keeps server-rendered locale routes, messages, metadata, hreflang, and sitemap output. Test for double translation and navigation conflicts.
Does Lovalingo support static generation (SSG) in Next.js?
A statically generated page can mount the Lovalingo browser runtime after hydration. Static target-language HTML is a separate host-build responsibility and must be generated and verified if your SEO requirements depend on it.