Lovalingo + Next.js
The simplest way to add i18n to your Next.js App Router project
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 of features. Next.js 14+ uses the App Router, which is fully supported by Lovalingo.
Why Lovalingo for Next.js?
Next.js has built-in i18n routing, but it doesn't handle translations — that's left to libraries like next-intl or react-i18next, which require manual JSON files. Lovalingo replaces that entire layer with AI-powered automatic translation, while still generating proper hreflang tags and locale-prefixed URLs that Google expects.
- Full Next.js App Router support
- Server Components compatible
- Locale-prefixed SEO URLs (/fr/, /de/)
- Automatic hreflang generation
- Replaces next-intl / next-i18next
- Zero JSON translation files
Install Prompt
Copy and paste this prompt into Next.js to add Lovalingo automatically:
Add automatic i18n to this Next.js App Router project with Lovalingo.
npm install @lovalingo/lovalingo
In app/layout.tsx, wrap with LovalingoProvider:
import { LovalingoProvider } from '@lovalingo/lovalingo';
import { headers } from 'next/headers';
export default function RootLayout({ children }: { children: React.ReactNode }) {
const locale = headers().get('x-locale') || 'en';
return (
<html lang={locale}>
<body>
<LovalingoProvider
publicAnonKey={process.env.NEXT_PUBLIC_LOVALINGO_KEY!}
defaultLocale="en"
locales={["fr", "de", "es", "it", "pt", "zh", "ar", "ja"]}
routing="path"
>
{children}
</LovalingoProvider>
</body>
</html>
);
}
Add middleware.ts for locale detection and routing.How to set up Lovalingo with Next.js
- 1
Install Lovalingo
Run `npm install @lovalingo/lovalingo` in your Next.js project.
- 2
Wrap your root layout
Add LovalingoProvider to app/layout.tsx as shown above.
- 3
Add middleware
Create or update middleware.ts to detect locale from URL prefix and set the x-locale header.
- 4
Add your API key
Add NEXT_PUBLIC_LOVALINGO_KEY to your .env.local file. Get your 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. Your app in 10+ languages in minutes.
FAQ
How is Lovalingo different from next-intl for Next.js?
next-intl requires you to manually create JSON translation files for every language and maintain them as your content changes. Lovalingo uses AI to translate automatically — you write your app in English and Lovalingo handles all other languages without any manual file management.
Does Lovalingo work with Next.js Server Components?
Yes. Lovalingo's LovalingoProvider is compatible with Next.js App Router and Server Components. Translation happens at the edge/runtime level without blocking server rendering.
Will Lovalingo generate correct hreflang tags for my Next.js site?
Yes. Lovalingo automatically generates hreflang alternate links for all configured locales, which is essential for multilingual SEO. The canonical URL always points to the locale-specific path (e.g., /fr/pricing for French).
Can I use Lovalingo with an existing Next.js i18n setup?
Yes, but you may want to remove the existing i18n setup to avoid conflicts. Lovalingo handles locale routing, translation, and hreflang generation — it replaces the need for next-intl, next-i18next, or manual JSON files.
Does Lovalingo support static generation (SSG) in Next.js?
Lovalingo is optimized for dynamic rendering with ISR (Incremental Static Regeneration). For fully static sites, the query routing mode works best. Path routing mode is recommended for SSR/ISR Next.js apps.