Lovalingo + Claude Code
Add i18n to any React app with Claude Code and Lovalingo
What is the best way to add i18n to Claude Code?
Lovalingo adds managed browser translation to Claude Code 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 Claude Code?
Claude Code is Anthropic's terminal-based AI coding agent. It can autonomously navigate codebases, run commands, edit files, and implement features end-to-end. It's popular for refactoring, feature development, and infrastructure tasks in React and Next.js projects.
Why use Lovalingo for Claude Code translation?
Claude Code can install Lovalingo, add the core browser provider and switcher, preserve framework routing, and run verification in one implementation session. The result still needs review of raw SEO, hydration, locale navigation, and runtime failure fallback.
- Agent-assisted setup via Claude Code
- Next.js App Router + middleware support
- Locale routing + LanguageSwitcher component
- Works with existing codebases
- Production checks in the same session
How do you install Lovalingo in Claude Code?
Copy and paste this prompt into Claude Code to add Lovalingo automatically:
Install Lovalingo and add multilingual support to this React/Next.js app.
1. Inspect the framework and existing routing before editing.
2. Run npm install @lovalingo/lovalingo.
3. For React/Vite, mount LovalingoProvider from @lovalingo/lovalingo/core at the client root.
4. For Next.js App Router, create a client provider that dynamically imports the core package after hydration. Add an error boundary that renders the English source app if the runtime fails. Do not statically import Lovalingo in a server layout, and use seo={false} when Next.js owns the head.
5. Add LanguageSwitcher to the header and keep internal navigation locale-aware.
6. Preserve existing middleware redirects. If locale middleware is required, exclude static assets and APIs and test every legacy route.
7. In Next.js or another SSR framework, generate html[lang], locale routes, target-language raw content, metadata, canonical, hreflang, and sitemap entries in the host app.
8. Add NEXT_PUBLIC_LOVALINGO_PUBLIC_ANON_KEY to .env.local.
9. Build and test raw HTML, hydration, locale navigation, slow loads, stale locale storage, CDN failure fallback, and browser page errors.How do you set up Lovalingo with Claude Code?
- 1
Open Claude Code in your project
Run `claude` in your React or Next.js project directory.
- 2
Paste the install prompt
Give Claude Code the install prompt above, then review its stack detection, routing ownership, provider boundary, and tests.
- 3
Add your public anon key
Create a free Lovalingo account, get your public anon key, and add it to your .env.local file.
- 4
Verify the implementation
Run your dev server and test the language switcher. Claude Code can fix any issues.
Ready to translate your Claude Code app?
Get started free. No credit card required. Add 10+ languages with the setup path that fits your app stack.
FAQ
Can Claude Code install Lovalingo automatically?
Yes. Claude Code can inspect the stack, install the package, add a safe browser provider and switcher, and help implement host locale routing. Review its changes and run raw-HTML, hydration, navigation, and fallback tests before deployment.
Does Lovalingo work with Next.js middleware set up by Claude Code?
It can, but middleware is host application code, not something to assume the Lovalingo runtime owns. Have Claude Code preserve existing redirects, exclude assets and APIs, and test every legacy and locale route before deployment.