How to Make Any React App Multilingual - Static UI + Dynamic Data

Most tutorials stop at translating buttons and labels. But what about the actual content - blog posts, product names, user bios fetched from your API? Thats where most multilingual setups break down. In this post, I'll show you how to build a fully multilingual Next.js app - both the static UI and the dynamic data - using two tools that work really well together: Lingo.dev Compiler (an official Lingo.dev product) and Mango.dev (an open-source library I built on top of the Lingo.dev SDK). 1. The Problem If you've ever tried to make a React app multilingual, you've probably reached for i18next. It works - but it comes with a lot of ceremony: translation key files, manual key management, and wrapping every string in a translation function. And even after all that, you still haven't solved the bigger problem. Here's the gap: Static UI Dynamic Server Data ────────────────────── ────────────────────────────── "Submit" button Blog post titles from your DB "Welcome back" label Product descript