UtlKit's Multilingual Rollout: Tackling SEO, i18n Challenges, and URL Navigation for Global Reach
August 24, 2026
A multilingual sitemap fix is the top priority: generate bilingual URLs for all pages and update sitemap logic and locale-aware links to properly reflect multiple languages.
After testing approaches like query strings and subdirectories, the team settled on a Next.js locale path prefix route, which improves SEO and leverages native Next.js support.
Major challenges include coordinating routing across languages, SEO implications, static export constraints, hydration issues, and scaling to 104 tool pages with 500+ i18n keys while keeping metadata accurate.
The final architecture centers on a root that detects language and redirects, a locale layout that renders full HTML, tool pages with bilingual metadata and alternates, an i18n provider with SSR awareness, and a separate sitemap strategy that covers both locales.
A known pitfall—redirects don’t work with static export—was tackled with client-side detection and a no-JS fallback, using window.location.replace to ensure SSR correctness.
Metadata generation was failing because params arrived as a Promise; the fix involves awaiting props.params and loading translations server-side for bilingual metadata.
Nested root layouts caused double HTML and hydration issues; the solution is to have RootLayout render only children, while locale-specific layouts render full HTML.
Lessons learned emphasize separate URLs per language for SEO, using the [locale] route in Next.js 15, avoiding layout nesting at root and locale levels, hard navigation for language switches, awaiting generateMetadata params, generating multilingual sitemaps, and establishing a scalable i18n key naming convention with defined alternates.languages for SEO.
Intro context: UtlKit, a 150+ tool site, embarked on a complex multilingual rollout for Chinese and other locales, completed over four weeks with several rewrites.
Pitfall: 500+ i18n keys require a naming convention and batch processing to translate all tool metadata and UI strings, with a phased rollout.
Pitfall: Language switch did not refresh content; the fix uses URL navigation (window.location.href) to trigger a full SSR-based refresh rather than relying on in-page state changes.
Summary based on 1 source
Get a daily email with more Tech stories
Source

DEV Community • Aug 24, 2026
6 Pitfalls of Building a Multilingual Site with Next.js 15: From Query Strings to URL Paths