ContainerLab
A bilingual (ES/EN) product built for two markets at once.
Problem
Serving two language markets from one codebase usually turns into either two maintained copies of the same site or a bolt-on translation layer that breaks the moment content gets structured.
Role
Built the site's architecture with localization as a first-class concern from the start — routing, content structure, and the ES/EN toggle all designed together, not patched in afterward.
Stack
- Next.js
- Tailwind CSS
- Vercel
- TypeScript
Architecture
Locale is a routing-level concern, not a runtime toggle — each language is a first-class route tree sharing one component and content layer.
- Step 1
Locale-aware routing
ES/EN live as sibling route trees sharing one layout and component system.
- Step 2
Typed content layer
Copy is structured and typed per-locale, so a missing translation fails at build, not in production.
- Step 3
Shared components
One set of UI components renders both languages — no forked component trees.
- Step 4
Edge delivery
Vercel edge network serves the correct locale with no client-side flash of the wrong language.
Outcome
One codebase serves both language markets natively, with content structured so adding or updating either language never risks the other.