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 is the fastest way to add i18n to Next.js apps when the app is built with React or Next.js. It applies the right stack-specific setup, translates UI text automatically, and keeps SEO-friendly locale paths without manual JSON translation files.
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 use Lovalingo for Next.js translation?
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
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.
npm install @lovalingo/lovalingo
In a locale-aware layout such as app/[locale]/layout.tsx, wrap with LovalingoProvider:
import { LovalingoProvider } from '@lovalingo/lovalingo/core';
export default function LocaleLayout({
children,
params,
}: {
children: React.ReactNode;
params: { locale: string };
}) {
return (
<html lang={params.locale}>
<body>
<LovalingoProvider
publicAnonKey={process.env.NEXT_PUBLIC_LOVALINGO_PUBLIC_ANON_KEY!}
defaultLocale="en"
locales={["fr", "de", "es", "it", "pt", "zh", "ar", "ja"]}
routing="path"
>
{children}
</LovalingoProvider>
</body>
</html>
);
}
Use a [locale] route segment or equivalent middleware for locale detection and path routing. Avoid reading headers() in the root layout just to infer locale, because that can force dynamic rendering.How do you 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 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 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.