Adding Multi-Language Support to React Navigation
Most portfolio sites start with a single language, but as your reach grows, so does the need for localization. Recently, I integrated a translation layer into the navbar of the Darwinhamiltonc/my-portfolio project to ensure a seamless experience for a global audience.
The Challenge of Static Navbars
Hardcoding navigation labels like "About" or "Projects" might seem fine for a MVP, but it creates a maintenance hurdle when you decide to pivot to a multi-language setup. I found myself looking at a navigation bar that was rigid and difficult to update without touching every single component file.
Implementing a Dynamic Translation Layer
Instead of managing translated strings directly in the components, I moved toward a simple provider-based lookup. This allowed the navigation components to remain "dumb" and purely presentation-focused.
const Navbar = () => {
const { t } = useTranslation();
return (
<nav>
<a href="/home">{t('nav.home')}</a>
<a href="/work">{t('nav.work')}</a>
</nav>
);
};
By utilizing a useTranslation hook, the component simply requests the key it needs. The underlying provider handles the mapping to the correct locale, whether it is English, Spanish, or another language.
The Outcome
This refactor had several immediate benefits:
- Separation of Concerns: Logic for language switching is entirely decoupled from the UI layout.
- Scalability: Adding a new language is now as simple as adding a new JSON file to the localization directory, rather than editing source code.
- Consistency: All labels across the site now draw from a single source of truth, eliminating inconsistencies in translation.
The Takeaway
Localization is often treated as an afterthought, but building it into your core navigation early provides massive dividends. By abstracting your text strings into a translation layer, you stop worrying about hardcoded content and start building a truly scalable interface.
Generated with Gitvlg.com
