The latest articles on DEV Community by Mubeen Khan (@mubeenkhaaan). https://dev.to/mubeenkhaaan https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4155949%2F8dec5289-676e-45d3-b966-980f4271e1db.png https://dev.to/mubeenkhaaan en Mubeen Khan Thu, 01 Oct 2026 23:01:57 +0000 https://dev.to/mubeenkhaaan/how-i-shipped-a-bilingual-enes-calculator-site-on-nextjs-static-generation-4no1 https://dev.to/mubeenkhaaan/how-i-shipped-a-bilingual-enes-calculator-site-on-nextjs-static-generation-4no1 <p>I run UtilityHub — 12 free finance calculators + money guides, Next.js 15 on Vercel. Last week I shipped the whole thing in Spanish. Here's the architecture that made it (mostly) painless.</p> <h2> The routing trick: one [locale] segment + middleware </h2> <p>Instead of next-intl, I used a single <code>app/[locale]</code> segment with a tiny middleware:</p> <ul> <li> <code>/es/*</code> → served as-is (locale = es)</li> <li> <code>/en/*</code> → 308 redirect to the canonical unprefixed URL</li> <li>everything else → rewritten to <code>/en/*</code> internally (URL stays clean)</li> </ul> <p>English keeps its clean URLs (<code>/tools/mortgage-calculator</code>) — zero SEO risk to existing rankings — while Spanish gets real localized slugs (<code>/es/tools/calculadora-de-hipoteca</code>).</p> <h2> Translations as data, not components </h2> <p>All calculator copy (labels, explainers, FAQs, meta) lives in <code>lib/tools.es.js</code>, mirroring the English <code>lib/tools.js</code> schema. The math (<code>lib/calculations.js</code>) is shared — translation never touches numbers. A Node schema-validation script checks all 12 entries: field parity, 4 FAQs each, numeric defaults byte-identical.</p> <h2> hreflang without tears </h2> <p>Every page emits reciprocal <code>en</code> / <code>es</code> / <code>x-default</code> alternates, with slug mapping via a small <code>lib/slug-map.js</code> (EN slug ↔ ES slug both directions).</p> <h2> Result </h2> <p>59 static pages, one build, <code>&lt;html lang&gt;</code> correct per locale, sitemap includes all <code>/es</code> URLs. The Spanish mortgage calculator is live if you want to poke at it: <a href="https://www.theutilityhub.online/es/tools/calculadora-de-hipoteca" rel="noopener noreferrer">https://www.theutilityhub.online/es/tools/calculadora-de-hipoteca</a></p> <p>Full English site: <a href="https://www.theutilityhub.online" rel="noopener noreferrer">https://www.theutilityhub.online</a></p> nextjs seo i18n javascript